API JavaScript Fetch: все, что вам нужно знать

fetch() — это механизм, который позволяет пользователю выполнять простые вызовы AJAX (асинхронный JavaScript и XML) с помощью JavaScript. Это означает, что вы можете использовать эту функцию для совершения вызова, не прерывая выполнения других операций. В этой статье объясняется, что делает API fetch() и как он используется. Мы также рассмотрим различные запросы с помощью fetch() и способы обработки ошибок с использованием фрагментов кода для ускорения процесса обучения.

В конце этого руководства пользователи смогут эффективно использовать запросы GET и POST с помощью fetch() в своих приложениях JavaScript, поймут, как Fetch API используется для выполнения асинхронных HTTP-запросов, и смогут эффективно обрабатывать ошибки.

Введение

API JavaScript Fetch — это интерфейс, который осуществляет доступ к частям протокола (системе правил, указывающих, как происходит обмен данными между компьютерами или внутри них), например запросы и ответы, и управляет ими. Интерфейс выборки JavaScript действует как средство извлечения ресурсов (в том числе по сети). Он также использует глобальный метод fetch(), который обеспечивает простой и логичный способ асинхронного получения ресурсов по сетям. Этот метод также доступен при указании веб-браузерам отправить запрос на URL-адрес.

Почему важно использовать API JavaScript Fetch?

API JS Fetch изменил способ выполнения разработчиками асинхронных запросов в современных веб-приложениях. Этот метод fetch() настолько невероятен, что можно инициировать процесс получения ресурса из сети, который возвращает обещание, выполненное после получения ответа. доступный. Обещание можно найти в объекте Response, который представляет собой ответ на ваш запрос.

Важно знать, что обещание fetch() может быть отклонено только в случае сетевой ошибки (чаще всего это происходит во время выдачи разрешений или чего-то подобного). Кроме того, обещание fetch() не отклоняется при ошибках HTTP (404 и т. д.). Однако, если встречается что-то подобное, обработчик then() должен проверить свойства Response.ok и/или Response.status.

Еще одна интересная особенность этого глобального метода — его связь с WindowOrWorkerGlobalScope, который реализуется как Window, так и WorkerGlobalScope (интерфейс API веб-воркера, который представляет область действия любого работника). Это означает, что метод fetch() доступен в любом контексте, который можно использовать для извлечения ресурсов.

Как предоставить параметры запроса с помощью API JavaScript Fetch?

Основной синтаксис

fetch(resource)
fetch(resource, options)

Параметры

ресурс

Это определяет извлекаемый ресурс. Это может быть строка или объект запроса.

варианты

Это объект, содержащий любые пользовательские настройки, которые можно применить к запросу.

метод

Метод запроса, например, GET, POST. Обратите внимание, что заголовок Origin (заголовок, указывающий источник (схему, имя хоста и порт), вызвавший запрос.) не устанавливается в запросах на выборку с помощью метода HEAD или GET.

заголовки.

Заголовки, добавленные к запросу, должны содержаться внутри объекта Headers или литерала объекта со строковыми значениями. Некоторые имена запрещено использовать в качестве заголовков.

тело

Тело может быть Blob, ArrayBuffer, TypedArray, URLSearchParams, DataView, FormData, строковым объектом или литералом или объектом ReadableStream. Однако запрос, использующий метод GET или HEAD, не может иметь тело.

режим

Это включает в себя режим, который используется для запроса, например CORS (совместное использование ресурсов между источниками), no-cors или тот же источник.

учетные данные.

Это контролирует, что браузеры делают с учетными данными (файлами cookie, сертификатами клиентов TLS и записями аутентификации HTTP). Он должен включать одну из следующих строк:

пропустить

Это заставит браузер исключить учетные данные из запроса и игнорировать любые учетные данные, отправленные обратно в ответе (например, любой заголовок Set-Cookie).

того же происхождения

По умолчанию это означает, что браузеры должны включать учетные данные в запросы к URL-адресам того же происхождения и использовать любые учетные данные, отправленные обратно в ответах с URL-адресов того же происхождения.

Фрагмент кода

Давайте рассмотрим практический пример выборки JavaScript, чтобы увидеть этот API в действии. Базовый запрос на выборку настроить очень просто.

Ниже приведен фрагмент кода;

fetch(‘http://example.com/movies.json’)
  .then((response) => response.json())
  .then((data) => console.log(data));

В приведенном выше коде мы получаем файл JSON по сети и печатаем его непосредственно на консоль. Более простой способ использования fetch() принимает только аргумент, который представляет собой путь к ресурсу, который вы решили получить, и не возвращает тело ответа JSON напрямую, а вместо этого возвращает обещание, которое фиксируется с помощью объекта Response.

Объект Response, в свою очередь, не содержит непосредственно тело ответа JSON, а служит представлением всего ответа HTTP. Итак, чтобы извлечь тело ответа JSON из объекта Response, мы будем использовать метод json(). Этот метод возвращает второе обещание, которое разрешается в результате анализа основного текста ответа как JSON.

Запросы GET и POST с помощью fetch()

GET-запросы

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

Просто вызовите fetch() с URL-адресом конечной точки в качестве аргумента, например:

fetch(‘https://developer.mozilla.org/en-US/docs/Web/API/fetch’);

Телом ответа для этой конечной точки будет любая информация об этом сообщении в блоге:

{
userId: 1,
id: 1,
title: ‘A post by Mozilla’,
body: ‘The fetch API’,
};

В конечном итоге мы также хотим получить тело ответа. Но объект ответа помимо тела содержит довольно много информации, включая код состояния, заголовки и другую информацию. (Обратите внимание, что API-интерфейс выборки возвращает обещание. По этой причине мы вложим метод then(), как указано ранее в этом руководстве, для обработки разрешения).

Поскольку данные, возвращаемые из API, находятся в форме JSON. Преобразование необходимо, чтобы упростить работу с данными для JavaScript. Об этом также говорилось ранее, для этого мы будем использовать метод json():

fetch(‘ https://developer.mozilla.org/en-US/docs/Web/API/fetch’)
.then(data => {
return data.json();
})
.then(post => {
console.log(post.title);
});

POST-запросы

В приведенный выше код мы вложили последующий метод then() для анализа данных (в данном случае — заголовка). В этом примере мы просто попытались получить сообщение в блоге через API. Давайте попробуем использовать метод POST выборки JavaScript для отправки статьи в блог.

Здесь нам нужно будет установить еще несколько параметров. До сих пор мы передали функции fetch() только один аргумент — конечную точку URL-адреса. Для запроса POST мы передадим объект параметров конфигурации в качестве второго аргумента. Этот необязательный объект может принимать множество различных параметров. Однако следует использовать только необходимые параметры. При отправке запроса POST нам нужно объявить этот метод и передать некоторые данные для создания новой записи в блоге. Помните, что это данные в формате JSON; следовательно, нам нужно установить для заголовка Content-Type значение application/JSON. Наконец, нам нужно, чтобы тело представляло собой одну строку данных JSON.

const update = {
title: ‘A blog post by Moxilla’,
body: ‘The fetch API’,
userId: 1,
};
const options = {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’,
},
body: JSON.stringify(update),
};

И затем вызов API:

fetch(‘https://jsonplaceholder.typicode.com/posts’, options)
.then(data => {
   if (!data.ok) {
   throw Error(data.status);
   }
   return data.json();
   }).then(update => {
   console.log(update);
   // {
   //
   title: ‘A blog post by Moxilla’,
   //
   body: ‘The fetch API’,
   //
   userId: 1,
   //
   id: 101
   // };
   }).catch(e => {
   console.log(e);
   });

Если запрос будет успешным, мы получим тело ответа, содержащее объект публикации в блоге вместе с новым идентификатором. Ответ будет зависеть от того, как настроен API. Вызовы выборки должны быть объединены для облегчения доступа.

Обработка ошибок

Хотя API JavaScript Fetch предоставляет идеальный способ выполнения сетевых запросов, он очень необходим для обработки потенциальных ошибок, возникающих во время процесса. В отличие от традиционных вызовов AJAX, которые генерируют ошибку при обнаружении ошибки HTTP, Fetch API отклоняет обещание только в случае сбоя сети. Это означает, что ошибки HTTP, такие как 500 или 404, не приведут к отклонению обещания выборки. Скорее, они будут решены обычным образом, и ответственность за их надлежащее устранение будет лежать на разработчике.

Распознавание ошибок HTTP

Вы можете проверить свойство ok объекта Response, чтобы обнаружить ошибки HTTP. Если он возвращает false , запрос не удался.

fetch(‘https://example.com/data’)
   .then(response => {
   if (!response.ok) {
   throw new Error(‘Network response was not ok’);
   }
   return response.json();
   })
   .then(data => console.log(data))
   .catch(error => console.log(‘There was a problem with the fetch operation:’, error.message));

В приведенном выше примере кода, если в запросе на выборку возникает ошибка HTTP, она выдает ошибку, и ее обрабатывает блок catch.

Обработка сетевых сбоев

Сбои сети, например, когда запрошенный URL-адрес не существует или пользователь находится в автономном режиме, приведут к отклонению обещания выборки. Мы можем перехватить их с помощью блока .catch().

E.g

fetch(‘https://fake-url.com’)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(‘Unable to fetch data:’, error));

В этом примере сообщение об ошибке «Невозможно получить данные» будет зарегистрировано, если запрос на выборку не удастся выполнить из-за проблемы с сетью.

Рекомендации, которые следует учитывать при использовании fetch.

• Всегда используйте .catch():Убедитесь, что в конце цепочек выборки всегда есть .catch() для обработки любых непредвиденных ошибок.
• Клонировать ответ. Учитывая тот факт, что ответ на запрос fetch() представляет собой объект Stream, который можно прочитать только один раз, не забудьте клонировать ответ, если вам нужно прочитать его несколько раз.
• Обеспечьте обратную связь с пользователем.В практической ситуации или реальном приложении не забывайте всегда предоставлять пользователю обратную связь. Будь то сообщение об ошибке, если что-то идет не так, или индикатор загрузки во время загрузки, обратная связь с пользователем важна для хорошего пользовательского опыта.

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

Заключение

С помощью функции fetch в JavaScript мы можем выполнять простые вызовы API, простой запрос GET с функцией выборки и запрос POST, в котором нам нужно без особых усилий передавать некоторые другие параметры, включая объект конфигурации. Fetch позволяет пользователю создавать HTTP-запросы, которые легко обрабатываются с помощью обещаний JavaScript. Что касается обработки асинхронного потока управления, обещания — это огромный шаг вперед по сравнению с обратными вызовами. Это особенно актуально, когда необходимо объединить несколько запросов один за другим. На этом этапе любой пользователь, прочитавший и реализовавший это руководство, сможет эффективно использовать API выборки в JavaScript.

Часто задаваемые вопросы

• Могу ли я отменить запрос на получение данных после того, как он был инициирован?
  Да. API выборки не предоставляет встроенного метода отмены запросов, но вы можете интегрировать его с интерфейсом AbortController для достижения этой функциональности. Передавая AbortSignal в запрос на выборку, вы можете позже вызвать метод abort() связанного AbortController, чтобы отменить запрос.
• Как использовать выборку для обработки различных форматов ответов, таких как XML или обычный текст?
  В статье мы продемонстрировали, как обрабатывать ответы JSON с помощью метода json() объекта Response. , но вы также можете обрабатывать разные форматы, используя другие методы. Для обычного текста используйте метод text(), а для XML или других типов данных вы можете использовать такие методы, как arrayBuffer() или formData(), в зависимости от типа ответа.
• Можно ли отслеживать ход выполнения запроса на получение, например, загрузки большого файла?
  Нет. Сам по себе API выборки не имеет встроенных обработчиков событий хода выполнения, таких как старый XMLHttpRequest. Если вам необходимо отслеживать прогресс, особенно при больших загрузках или загрузках, вы можете рассмотреть возможность использования XMLHttpRequest или сторонних библиотек, предлагающих эту функцию.
• Могу ли я использовать API выборки JavaScript в старых браузерах?
  Нет, но Polyfills может обеспечить совместимость. API выборки — это недавнее дополнение к JavaScript, хотя многие новые браузеры поддерживают его, а некоторые старые — нет. Всегда полезно проверить совместимость браузера, если вы ориентируетесь на старые или менее распространенные браузеры. Альтернативно вы можете использовать полифилы, такие как Whatwg-fetch, чтобы обеспечить совместимость со старыми браузерами.
• Как обрабатывать несколько запросов на выборку одновременно?
  Вы можете обрабатывать запросы на выборку одновременно, используя метод Promise.all(). Этот метод принимает массив обещаний (в данном случае запросы на выборку) и возвращает новое обещание, которое разрешается, когда все обещания в массиве решены. Это полезно в тех случаях, когда вам нужно дождаться завершения нескольких запросов, прежде чем продолжить.

Оригинально опубликовано на сайте https://www.turing.com 30 августа 2023 г.