Давайте поговорим о Fetch. Нет, это не та игра, в которую вы играете со своей собакой, а что-то очень похожее.
Все, что мы делаем в Интернете, по большей части представляет собой целую кучу запросов на выборку. Что я имею в виду? В «старые времена» для того, чтобы король мог отправить указ своему народу, должен был быть «Королевский посланник», который выполнял роль информирования всех о новом указе короля. Это означало бы либо много пеших прогулок, либо верховую езду, чтобы проинформировать всех в королевстве.
К счастью, мы живем в век информации, когда информация — сила. Почти буквально. Мы стали зависеть от отправки информации через Интернет, чтобы многие вещи работали и были в порядке. Такие вещи, как складское программное обеспечение, правительственные приложения и многое другое. Мы полагаемся на приложения, которые используем, чтобы иметь возможность эффективно общаться с людьми и машинами по всему миру. Затем, как именно наши приложения отправляют информацию туда и обратно. И, где именно эта информация собирается? Давай выясним.
Как вы можете видеть на диаграмме выше, наши устройства (планшеты, телефоны, компьютеры и т. д.) отправляют запрос из любого приложения, которое мы используем, через Интернет на сервер, где находится нужная нам информация. Затем сервер отправляет запрошенные данные таким образом, чтобы приложение клиентского устройства могло их прочитать.
Тогда как мы инициализируем этот запрос информации? Давайте углубимся в то, как написать запрос FETCH на сервер.
Отправка запроса
Fetch() — это встроенный в JavaScript метод, который указывает приложению (т. е. браузеру) отправить запрос данных на сервер. В нашем примере мы создали локальный сервер json для получения нашей информации. Доступными конечными точками, из которых мы можем получать нашу информацию, являются «/cakes» и «/flavorsData». Как только вы запустите свой json-сервер локально, он вернет что-то вроде изображения ниже.
Эта информация предназначена только для того, чтобы вы могли видеть, как выглядят конечные точки, чтобы знать, откуда мы запрашиваем нашу информацию. Как только мы узнаем, откуда мы запрашиваем нашу информацию, мы хотим начать формировать наш запрос на выборку.
- Мы хотим начать с ввода «fetch», а затем нашего URL-адреса в кавычках, а также в паре скобок.
2. Затем мы хотим что-то сделать с полученной информацией. Это называется обещанием. Поскольку мы получаем информацию способом, который наш браузер не сможет прочитать и отобразить, у нас есть метод json() для анализа информации и возврата другого промиса, который мы теперь можем использовать и манипулировать так, как захотим. Синтаксис следующий.
3. Теперь мы получили информацию таким образом, что можем ею манипулировать, запуская ее через функцию или объявляя ее как значение переменной состояния. Именно это я и сделал с этим запросом на выборку. Я изменил значение переменной состояния, чтобы получить эту информацию для использования в разных частях моего приложения.
4. Краткое объяснение того, что происходит на картинке выше, заключается в том, что над этой выборкой я объявил переменную состояния cake иcakeList, которые изначально являются просто пустыми массивами ([]). Я использую функцию установки (setCakes и setCakeList), чтобы получить полученные данные. Позже я использовал эти переменные состояния, чтобы передать их в разные части моего приложения.
Именно так вы делаете простой запрос на получение данных. Последнее, что касается выборки, заключается в том, что с запросами на выборку можно делать больше вещей, таких как POST, GET, PUT, DELETE. Я подробно расскажу об этом в следующем посте.
