Чтобы понять, как использовать fetch(), сначала мы должны понять, что она делает. Согласно названию, fetch API используется для асинхронной выборки данных. Он предоставляет интерфейс JavaScript для доступа и управления частями конвейера HTTP, такими как запросы и ответы. Аналог XMLHttpRequest. Но fetch API предоставляет метод fetch(), который проще использовать для асинхронного получения запроса.
fetch()позволяет делать сетевые запросы, аналогичные XMLHttpRequest (XHR). Основное отличие заключается в том, что Fetch API использует Promises, что позволяет использовать более простой и чистый API, избегая ада обратных вызовов и необходимости помнить о сложном API XMLHttpRequest.
Использование выборки()
Начать работу с fetch очень просто. Прежде всего вам нужен URL-адрес, в этом случае я использую поддельный API из req.res.in, который будет генерировать поддельные данные. Чтобы запустить команду, просто откройте простой файл javascript и запустите его в браузере.
Если мы запустим это, мы увидим на консоли, что он возвращает обещание.
Поскольку fetch() основан на промисах, вы также можете использовать async-await или .then() и .catch() для получения данных. Теперь мы используем метод .then() для получения объекта ответа следующим образом.
который вернет наш объект ответа, как показано ниже.
Итак, вы можете видеть, что мы получаем ответ с кодом состояния (200) «ОК». Это означает, что запрос выполнен успешно. Тело содержит все наши данные. Но мы не можем прочитать данные прямо сейчас. Сначала мы должны преобразовать это в объект JSON, используя метод .json(). Это вернет другое обещание, поэтому мы должны использовать другой метод .then() и передать ему данные.
И тогда мы можем увидеть на нашей панели консоли наши данные, как показано ниже.
Таким образом, мы можем легко получить данные с помощью fetch API.
Обработка ОШИБКИ в Fetch()
Чтобы обработать ошибку, мы используем метод .catch() для вывода сообщения об ошибке с кодом состояния ошибки.
Изменение данных с помощью Fetch()
С этого момента мы получаем данные в качестве ответа. Что, если мы хотим изменить наши данные? Для этого нам нужен запрос POST или PUT для создания или замены данных. Чтобы использовать этот тип запроса, мы должны передать метод в качестве второго аргумента в методе fetch(). В качестве третьего аргумента мы должны ввести объект Headers. Внутри объекта headers мы должны ввести content-type
Интерфейс
HeadersFetch API позволяет выполнять различные действия над заголовками запросов и ответов HTTP. Эти действия включают получение, установку, добавление и удаление заголовков из списка заголовков запроса.
И затем мы должны записать данные, которые мы хотим создать или изменить, в качестве следующего аргумента. Но это вызовет ошибку. Поскольку данные мы получаем как объект JSON, для правильной синхронизации данных с объектом json мы должны использовать json.stringify() для преобразования их в строку.
В приведенном выше коде я создал запрос POST для создания имени «Sankalan» с использованием метода fetch(), который дает следующий ответ:
Здесь вы можете видеть, что вы вводите пользователя с указанным именем в данные.
Вывод:
Таким образом, вы можете использовать fetch API для получения данных или изменения, создания, удаления данных с помощью метода fetch(). Вот еще несколько ресурсов для изучения:
Спасибо!
