Работа с API в ваших приложениях часто требует от вас отправки запросов API для доступа и управления частями конвейера HTTP. Базовый запрос на выборку действительно прост в настройке, а Fetch API предоставляет интерфейс для извлечения ресурсов даже по сети. Он служит курьером между вами и API, отправляя, доставляя и выполняя задачи, указанные в запросе на выборку.
Метод fetch() будет принимать один аргумент, который представляет собой путь к ресурсу, который вы хотите получить. При создании, удалении или обновлении с помощью fetch() вы также можете передать объект в качестве второго аргумента, который будет служить вашей конфигурацией. Конфигурация может содержать спецификации для типа метода, заголовка и тела вашего метода выборки. fetch() вернет Promise, который разрешается в ответ.
Теперь давайте рассмотрим примеры выборки для каждой из функций CRUD (создание, чтение, обновление, удаление) и посмотрим, как работает выборка!
Читать с помощью Fetch
Чтобы получить данные из API, вы можете включить URL-адрес API в качестве единственного аргумента для fetch(). Успех! Мы получили ответ, а затем использовали json() для чтения и анализа данных.
Создать с помощью Fetch
При отправке запроса на создание нового объекта и его отправку в API наш fetch метод будет выглядеть аналогично приведенному выше, но с некоторыми дополнительными данными в вашем запросе. Как вы можете видеть в приведенном ниже примере, выборка будет иметь дополнительный аргумент, который включает объект, содержащий следующую информацию:
- Для создания с помощью fetch мы будем использовать метод
‘POST’.. Убедитесь, что вы используете заглавные буквы при настройке конфигурации. В противном случае ваша выборка может не завершить действие. - Текст, который вы отправляете, будет зависеть от требований API. Проверьте документацию по API, в которой будет указано, какие именно ключи вам понадобятся для успешной публикации данных. Этот объект будет помещен в
JSON.stringify(), который преобразует значение JavaScript в строку JSON. - Наконец, заголовки позволяют клиенту и серверу передавать дополнительную информацию с запросом или ответом. В простом заголовке указывается
Content-type.. Однако вы можете просмотреть различные параметры заголовка и выбрать наиболее подходящий для вашего приложения.
Обновить с помощью Fetch
fetch() метод обновления элемента работает аналогично публикации, за исключением того, что вы также берете идентификатор объекта, который хотите отредактировать / обновить.
Удалить с помощью выборки
Точно так же функция удаления примет идентификатор объекта, который мы запросили для удаления, и удалит его из API.
Дополнительную информацию о Fetch API можно найти в документации здесь.
