Наиболее широко используемый и известный метод связи между браузером и сервером - это Http / s. Это протокол, построенный на основе запроса / ответа. Сегодня мы попрактикуемся в Fetch API, одном из типов WebAPI, обеспечивающих эту связь.

Перед этой статьей я рекомендую вам прочитать статью Fetch API Practices - 1 . Наш сценарий на этот раз таков ...

По дебаунсу (0,5 с), когда мы пишем имя пользователя в текстовом поле ниже . Другими словами, каждый раз, когда мы нажимаем клавишу клавиатуры, мы хотим, чтобы он выполнял поиск на сервере и отображал результат этого поиска на экране после ожидания не менее 0,5 секунды, а не поиска.

Еще одно ожидание состоит в том, что экран - это состояние.

const UISTATE = {
   initial: 'inital (ilk başlangıç)
   fetching: 'fetching', (veri çekiliyor)
   fetched: 'fetched', (veri başarılı bir şekilde çekildi)
   error: 'error', (veri çekilmesinde problem yaşandı)
}

//Toolu indir
npm install -g json-server //JSon Server ilgili port kendi db.json ile calistir.
JsonServer Calıstırın.
json-server --watch db.json --port 3004

Следующая часть выполняет нашу операцию выборки. Когда мы выполняем q =…, он выполняет поиск на сервере и возвращает результаты.

Как видно из этого примера, мы добавляем UIState между ними. Мы преобразуемся в выборку перед извлечением данных, выборку после получения данных и состояние ошибки в случае возникновения ошибки.

И в соответствии с этим состоянием мы выполняем операцию Render на экране.

Важным моментом здесь является то, что каждый раз, когда мы нажимаем клавишу клавиатуры, Backend не отправляет операцию выборки, а запускает операцию поиска, если есть изменение в искомом слове, помещая между ними 0,5-секундные паузы.

Для этого нам нужно дребезг. Выполняя поиск по значениям, накопленным за 0,5 секунды с определенным таймером, мы не утомляем бэкэнд больше, чем необходимо.

Исходный код

• React Sample Fetch

Вы можете нажать на эту ссылку, чтобы получить доступ к остальной части этой статьи или другим статьям в группе статей .