Fetch
JavaScript может отправлять сетевые запросы на сервер и подгружать новую информацию по мере необходимости.
Например, мы можем использовать сетевой запрос, чтобы:
Для сетевых запросов из JavaScript есть широко известный термин «AJAX» (аббревиатура от Asynchronous JavaScript And XML). XML мы использовать не обязаны, просто термин старый, поэтому в нём есть это слово. Возможно, вы его уже где-то слышали.
Есть несколько способов делать сетевые запросы и получать информацию с сервера.
Метод fetch() — современный и очень мощный, поэтому начнём с него. Он не поддерживается старыми (можно использовать полифил), но поддерживается всеми современными браузерами.
Браузер сразу же начинает запрос и возвращает промис, который внешний код использует для получения результата.
Процесс получения ответа обычно происходит в два этапа.
Во-первых, promise выполняется с объектом встроенного класса Response в качестве результата, как только сервер пришлёт заголовки ответа.
На этом этапе мы можем проверить статус HTTP-запроса и определить, выполнился ли он успешно, а также посмотреть заголовки, но пока без тела ответа.
Промис завершается с ошибкой, если fetch не смог выполнить HTTP-запрос, например при ошибке сети или если нет такого сайта. HTTP-статусы 404 и 500 не являются ошибкой.
Мы можем увидеть HTTP-статус в свойствах ответа:
Во-вторых, для получения тела ответа нам нужно использовать дополнительный вызов метода.
Response предоставляет несколько методов, основанных на промисах, для доступа к телу ответа в различных форматах:
Например, получим JSON-объект с последними коммитами из репозитория на GitHub:
В качестве примера работы с бинарными данными, давайте запросим и выведем на экран логотип спецификации «fetch» (см. главу Blob, чтобы узнать про операции с Blob ):
Мы можем выбрать только один метод чтения ответа.
Заголовки ответа
Заголовки запроса
Есть список запрещённых HTTP-заголовков, которые мы не можем установить:
Эти заголовки обеспечивают достоверность данных и корректную работу протокола HTTP, поэтому они контролируются исключительно браузером.
POST-запросы
Чаще всего используется JSON.
Например, этот код отправляет объект user как JSON:
Отправка изображения
Итого
Типичный запрос с помощью fetch состоит из двух операторов await :
Методы для получения тела ответа:
Задачи
Получите данные о пользователях GitHub
В песочнице есть тестовый пример.
А если запрос завершается ошибкой или код статуса в ответе отличен от 200, то мы просто возвращаем null в массиве результатов.
Это пример того, как относительно низкоуровневое Promise API может быть полезным, даже если мы в основном используем async/await в коде.
Введение в fetch
fetch() позволяет вам делать запросы, схожие с XMLHttpRequest (XHR). Основное отличие заключается в том, что Fetch API использует Promises (Обещания), которые позволяют использовать более простое и чистое API, избегать катастрофического количества callback’ов и необходимости помнить API для XMLHttpRequest.
Fetch API стал доступен пользователям вместе с Service Worker’ами в global скоупе в Chrome 40, однако уже в версии 42 он станет доступен в скоупе window. Разумеется, для всех остальных браузеров, которые пока ещё не поддерживают fetch существует полифил от GitHub, который доступен уже сегодня.
Простой Fetch запрос
XMLHttpRequest
Fetch
Наш fetch запрос будет выглядеть так:
Первым делом мы проверяем статус ответа и проверяем, успешно ли выполнился запрос (ожидаем 200 статус). Если всё хорошо, то парсим ответ как JSON.
Ответом fetch() является Stream-объект. Это означает, что в результате вызова метода json() мы получим Promise, т.к. чтение из подобного объекта является асинхронным.
Метаданные ответа
В предыдущем примере мы изучили, как можно проверить статус объекта ответа и конвентировать сам ответ в JSON. Остальные метаданные, к которым вы возможно получить доступ (например, заголовки), приведены ниже:
Типы ответа
Когда мы делаем fetch-запрос, ответу будет дан тип «basic», «cors» или «opaque». Эти «типы» указывают на то, с какого ресурса пришли данные и могут быть использованы для того, чтобы определить процесс обработки данных.
Когда запрос сделан на ресурс, находящимся на том же origin (имеется ввиду, что запрос выполняется в рамках одного сайта. прим. пер.), ответ будет содержать тип «базовый» и для такого запроса не будет никаких ограничений.
Если запрос сделан с одного origin’а на другой (кроссдоменный запрос), который, в свою очередь, вернул CORS заголовки, тогда типом будет являться «cors». Объекты с типами «cors» и «basic» почти идентичны, однако «cors» несколько ограничивает метаданные, к которым может быть получен доступ до «Cache-Control», «Content-Language», «Content-Type», «Expires», «Last-Modified», и «Pragma».
Что касается «opaque» — то он приходит в случаях, когда выполняется CORS запрос, но удаленный ресурс не возвращает CORS заголовки. Данный тип запроса не предоставляет доступ данным или заголовку статуса, поэтому мы не имеем возможности судить о результате выполнения запроса. В рамках текущей имплементации fetch() не представляется возможности выполнять CORS запросы из скоупа window, и вот здесь написано почему. Эта функциональность должна быть добавлена, как только Cache API станет доступным из объекта window.
Вы можете определить ожидаемый режим запроса, тем самым фильтруя результаты запросов с неподходящим типом. Режим запроса может быть установлен на следующий:
— “same-origin” успешно выполняется только для запросов на тот же самый origin, все остальные запросы будут отклонены.
— “cors” работает так же, как «same-origin» + добавляет возможность создавать запросы к сторонним сайтам, если они возвращают соответствующие CORS заголовки.
— “cors-with-forced-preflight” работает так же, как «cors», но перед запросом всегда отсылает тестовый запрос на проверку.
— “no-cors” используется, когда необходимо выполнить запрос к origin, который не отсылает CORS заголовки и результатом выполнения является объект с типом «opaque». Как говорилось выше, в данный момент это невозможно в скоупе window.
Чтобы определить режим запроса, добавьте объект опций вторым параметром к запросу и установите «mode» в этом объекте:
Цепочки Promises
Если вы работаете с JSON API, вам потребуется проверить статус и распарсить JSON для каждого ответа. Вы можете упростить свой код, определив парсинг статуса и JSON как раздельные функции, которые вернут Promise’ы. Вам останется подумать только об обработке самих данных и, разумеется, исключений.
Но самое лучшее здесь — это возможность переиспользовать такой код для всех fetch-запросов в приложении. Такой код проще поддерживать, читать и тестировать.
POST запрос
Уже давно никого не удивишь необходимостью использовать POST метод с передачей параметров в «теле» запроса для работы с API.
Чтобы осуществить такой запрос, мы должны указать соответствующие параметры в объекте настроек fetch() :
Посылаем учётные данные через Fetch-запрос
Если вы хотите отправить запрос с каким-либо учётными данными (например, с cookie), вам следует установить `credentials` в опциях запроса на «include»:
Могу ли я отменить fetch() запрос?
В настоящий момент это невозможно, но это активно обсуждается на GitHub
Существует ли полифил?
Да
Почему «no-cors» реализован для service workers, но не для window?
Это было сделано из соображений безопасности. Подробнее можно ознакомиться здесь.
Получение данных с сервера
Другой очень распространённой задачей в современных веб-сайтах и приложениях является получение отдельных элементов данных с сервера для обновления разделов веб-страницы без необходимости загрузки всей новой страницы. Эта, казалось бы, небольшая деталь оказала огромное влияние на производительность и поведение сайтов, поэтому в этой статье мы объясним концепцию и рассмотрим технологии, которые делают это возможным, например XMLHttpRequest и API Fetch.
| Необходимые условия: | Основы JavaScript (см. первые шаги, структурные элементы, объекты JavaScript), основы клиентских API |
|---|---|
| Задача: | Узнать, как извлекать данные с сервера и использовать их для обновления содержимого веб-страницы. |
В чем проблема?
Проблема с этой моделью заключается в том, что всякий раз, когда вы хотите обновить любую часть страницы, например, чтобы отобразить новый набор продуктов или загрузить новую страницу, вам нужно снова загрузить всю страницу. Это очень расточительно и приводит к плохому пользовательскому опыту, особенно по мере того, как страницы становятся все более сложными.
Появление Ajax
Это привело к созданию технологий, позволяющих веб-страницам запрашивать небольшие фрагменты данных (например, HTML, XML, JSON или обычный текст) и отображать их только при необходимости, помогая решать проблему, описанную выше.
Примечание: Вначале эта общая техника была известна как Асинхронный JavaScript и XML (Ajax), поскольку она, как правило, использовала XMLHttpRequest для запроса данных XML. В наши дни это обычно не так (вы, скорее всего, будете использовать XMLHttpRequest или Fetch для запроса JSON), но результат все тот же, и термин «Ajax» по-прежнему часто используется для описания этой техники.
Модель Ajax предполагает использование веб-API в качестве прокси для более разумного запроса данных, а не просто для того, чтобы браузер перезагружал всю страницу. Давайте подумаем о значении этого:
Это действительно хорошо, потому что:
Чтобы ускорить работу, некоторые сайты также сохраняют необходимые файлы и данные на компьютере пользователя при первом обращении к сайту, а это означает, что при последующих посещениях они используют локальные версии вместо загрузки свежих копий, как при первой загрузке страницы. Содержимое загружается с сервера только при его обновлении.
Основной запрос Ajax
Этот набор файлов будет действовать как наша поддельная база данных; в реальном приложении мы с большей вероятностью будем использовать серверный язык, такой как PHP, Python или Node, чтобы запрашивать наши данные из базы данных. Здесь, однако, мы хотим сохранить его простым и сосредоточиться на стороне клиента.
XMLHttpRequest
Обслуживание вашего примера с сервера
Некоторые браузеры (включая Chrome) не будут запускать запросы XHR, если вы просто запускаете пример из локального файла. Это связано с ограничениями безопасности (для получения дополнительной информации о безопасности в Интернете, ознакомьтесь с Website security).
Чтобы обойти это, нам нужно протестировать пример, запустив его через локальный веб-сервер. Чтобы узнать, как это сделать, прочитайте Как настроить локальный тестовый сервер?
Fetch
Давайте преобразуем последний пример, чтобы использовать Fetch!
Сделайте копию своего предыдущего готового каталога примеров. (Если вы не работали над предыдущим упражнением, создайте новый каталог и внутри него создайте копии xhr-basic.html и четырёх текстовых файлов — verse1.txt, verse2.txt, verse3.txt и verse4.txt.)
Внутри функции updateDisplay() найдите код XHR:
Замените весь XHR-код следующим:
Загрузите пример в свой браузер (запустите его через веб-сервер), и он должен работать так же, как и версия XHR, при условии, что вы используете современный браузер.
Итак, что происходит в коде Fetch?
Но имеет смысл называть параметр тем, что описывает его содержимое!
Теперь давайте сосредоточимся только на функции:
Какой механизм следует использовать?
Это действительно зависит от того, над каким проектом вы работаете. XHR существует уже давно и имеет отличную кросс-браузерную поддержку. Fetch and Promises, с другой стороны, являются более поздним дополнением к веб-платформе, хотя они хорошо поддерживаются в браузере, за исключением Internet Explorer и Safari (которые на момент написания Fetch были доступны в своём предварительный просмотр технологии).
Если вам необходимо поддерживать старые браузеры, тогда может быть предпочтительным решение XHR. Если, однако, вы работаете над более прогрессивным проектом и не так обеспокоены старыми браузерами, то Fetch может быть хорошим выбором.
Более сложный пример
По умолчанию на сайте отображаются все продукты, но вы можете использовать элементы управления формы в столбце слева, чтобы отфильтровать их по категориям, поисковому запросу или и тому и другому.
Существует довольно много сложного кода, который включает фильтрацию продуктов по категориям и поисковым запросам, манипулирование строками, чтобы данные отображались правильно в пользовательском интерфейсе и т.д. Мы не будем обсуждать все это в статье, но вы можете найти обширные комментарии в коде (см. can-script.js).
Однако мы объясним код Fetch.
Первый блок, который использует Fetch, можно найти в начале JavaScript:
Вы можете проверить сам случай отказа:
Второй блок Fetch можно найти внутри функции fetchBlob() :
Вызов: XHR версия the Can Store
Мы хотели бы, чтобы вы решили преобразовать версию приложения Fetch для использования XHR в качестве полезной части практики. Возьмите копию ZIP файла и попробуйте изменить JavaScript, если это необходимо.
Некоторые полезные советы:
Примечание: Если у вас есть проблемы с этим, не стесняйтесь сравнить свой код с готовой версией на GitHub (см. исходник здесь, а также см. это в действии).
Резюме
Это завершает нашу статью по извлечению данных с сервера. К этому моменту вы должны иметь представление о том, как начать работать как с XHR, так и с Fetch.
Смотрите также
Однако в этой статье обсуждается много разных тем, которые только поцарапали поверхность. Для получения более подробной информации по этим темам, попробуйте следующие статьи:
Основы Fetch API в JavaScript
Fetch – это новый API, основанный на промисах. Он позволяет выполнять запросы Ajax и при этом избежать всей работы, связанной с XMLHttpRequest. Этот мануал покажет вам, насколько Fetch прост в использовании и как он способен упростить извлечение ресурсов из API. Кроме того, теперь Fetch поддерживается всеми современными браузерами, поэтому использовать его действительно несложно.
Запросы GET
Давайте посмотрим на этот простой запрос GET, который извлечет нам кое-какие фиктивные данные из JSONPlaceholder API:
fetch(‘https://jsonplaceholder.typicode.com/users’)
.then(res => res.json())
.then(res => res.map(user => user.username))
.then(userNames => console.log(userNames));
В результате мы получим такой массив имен пользователей:
[«Bret», «Antonette», «Samantha», «Karianne», «Kamren», «Leopoldo_Corkery», «Elwyn.Skiles», «Maxime_Nienow», «Delphine», «Moriah.Stanton»]
Учитывая, что мы ожидаем ответа в JSON, нам сначала нужно вызвать метод json(), чтобы преобразовать полученный объект в такой, с которым можно взаимодействовать. Если бы нам был нужен ответ XML, мы могли бы использовать text().
Запросы POST, PUT и DELETE
Чтобы отправить другие запросы, передайте объект в качестве второго аргумента вызова fetch, указав метод, а также любые необходимые заголовки и тело запроса:
const myPost = <
title: ‘A post about true facts’,
body: ’42’,
userId: 2
>
const options = <
method: ‘POST’,
body: JSON.stringify(myPost),
headers: <
‘Content-Type’: ‘application/json’
>
>;
fetch(‘https://jsonplaceholder.typicode.com/posts’, options )
.then(res => res.json())
.then(res => console.log(res));
JSONPlaceholder отправляет нам данные в ответ на POST-запрос с прикрепленным ID:
Object <
body: 42,
id: 101,
title: «A post about true facts»,
userId: 2
>
Примечание: Тело запроса необходимо преобразовать в строку. Для вызовов fetch вы также можете использовать DELETE, PUT, HEAD и OPTIONS.
Обработка ошибок
Что касается обработки ошибок, тут у Fetch API есть большой плюс: если запрос правильно попадает в конечную точку и возвращается, ошибки не возникает. С другой стороны, это означает, что обработка ошибок – это не просто помещение вызова catch в конец цепочки промисов fetch для перехвата.
К счастью, объект ответа вызова fetch имеет свойство ok, которое будет либо истинным, либо ложным, в зависимости от успеха запроса. Если ok имеет значение false, вы можете использовать Promise.reject():
fetch(‘https://jsonplaceholder.typicode.com/ postsZZZ ‘, options)
.then(res => <
if (res.ok) <
return res.json();
> else <
return Promise.reject(< status: res.status, statusText: res.statusText >);
>
>)
.then(res => console.log(res))
.catch(err => console.log(‘Error, with message:’, err.statusText ));
В приведенном выше примере промис будет отклонен, потому что мы вызываем конечную точку, которой не существует. По цепочке выполнится вызов catch, и на экране появится следующее:
«Error, with message: Not Found»
Использование Fetch в связке с async/await
Поскольку Fetch – это API, основанный на промисах, вы можете легко использовать асинхронные функции, чтобы сделать код более понятным и синхронным. Вот, например, функция async/await, которая выполняет простой GET запрос и извлекает имена пользователей из ответа JSON, чтобы затем вывести результат на консоль:
async function fetchUsers(endpoint) <
const res = await fetch(endpoint);
let data = await res.json();
data = data.map(user => user.username);
console.log(data);
>
fetchUsers(‘https://jsonplaceholder.typicode.com/users’);
Также можно просто вернуть промис из функции async/await, и тогда вы сможете продолжать цепочку вызовами then после вызова функции:
async function fetchUsers(endpoint) <
const res = await fetch(endpoint);
const data = await res.json();
return data;
>
fetchUsers(‘https://jsonplaceholder.typicode.com/users’)
.then(data => <
console.log(data.map(user => user.username));
>);
Примечание: Вызов метода json() возвращает промис, поэтому в приведенном выше примере строка return data для функции async возвращает промис.
Вы также можете вывести ошибку, если ответ ok имеет значение false, и перехватить ошибку в цепочке промисов.
async function fetchUsers(endpoint) <
const res = await fetch(endpoint);
if (!res.ok) <
throw new Error(res.status); // 404
>
const data = await res.json();
return data;
>
fetchUsers(‘https://jsonplaceholder.typicode.com/ usersZZZ ‘)
.then(data => <
console.log(data.map(user => user.website));
>)
.catch(err => console.log(‘Ooops, error’, err.message));
Полизаполнения
Если вам нужна поддержка старых браузеров, таких как Internet Explorer 11, вам потребуется использовать полизаполнение Fetch (например, вот это с Github).
Если вам нужно использовать Fetch в Node.js, тут существует два наиболее популярных варианта полизаполнения – isomorphic-fetch и node-fetch.
Полезные данные о поддержке Fetch API основными браузерами можно найти здесь.
Использование JavaScript Fetch API для получения данных
Published on February 19, 2021
Введение
Сейчас JavaScript имеется собственный встроенный способ отправки запросов API. Это Fetch API, новый стандарт создания серверных запросов с промисами, также включающий много других возможностей.
В этом учебном модуле мы создадим запросы GET и POST, используя Fetch API.
Предварительные требования
Для этого обучающего модуля вам потребуется следующее:
Шаг 1 — Введение в синтаксис Fetch API
После метода fetch() нужно включить метод промиса then() :
Под методом then() следует включить метод catch() :
В целом, использование Fetch API выглядит следующим образом:
Теперь мы понимаем синтаксис использования Fetch API и можем переходить к использованию fetch() с реальным API.
Шаг 2 — Использование Fetch для получения данных от API
Следующие примеры кода основаны на Random User API. Используя API, вы получаете десять пользователей и выводите их на странице, используя Vanilla JavaScript.
Идея заключается в том, чтобы получить все данные от Random User API и вывести их в элементах списка внутри списка автора. Для начала следует создать файл HTML и добавить в него заголовок и неупорядоченный список с идентификатором authors :
При этом данные JSON все равно необходимо обработать. Добавьте еще одно выражение then() с функцией, имеющей аргумент с именем data :
Для каждого автора в переменной authors нам нужно создать элемент списка, выводящий портрет и имя автора. Для этого отлично подходит метод map() :
Повторите эту процедуру, чтобы создать элемент span и элемент img :
Предлагает имя автора и портрет, идущий вместе с именем. Установите в img.src портрет автора:
Это полный код запроса, который вы создали:
Вы только что успешно выполнили запрос GET, используя Random User API и Fetch API. На следующем шаге вы научитесь выполнять запросы POST.
Шаг 3 — Обработка запросов POST
По умолчанию Fetch использует запросы GET, но вы также можете использовать и все другие типы запросов, изменять заголовки и отправлять данные. Для этого нужно задать объект и передать его как второй аргумент функции fetch.
Прежде чем создать запрос POST, создайте данные, которые вы хотите отправить в API. Это будет объект с именем data с ключом name и значением Sammy (или вашим именем):
Обязательно добавьте постоянную переменную, хранящую ссылку на Random User API.
Поскольку это запрос POST, ее нужно будет указать явно. Создайте объект с именем fetchData :
Интерфейс Headers является свойством Fetch API, который позволяет выполнять различные действия с заголовками запросов и ответов HTTP. Если вы захотите узнать об этом больше, вы можете найти более подробную информацию в статье под названием Определение маршрутов и методов запросов HTTP в Express.
С этим кодом можно составлять запросы POST, используя Fetch API. Мы добавим url и fetchData как аргументы запроса fetch POST:
Функция then() будет включать код, обрабатывающий ответ, получаемый от сервера Random User API:
В целом код будет выглядеть следующим образом:
Теперь вы знаете два метода создания и выполнения запросов POST с помощью Fetch API.
Заключение
Хотя Fetch API поддерживается еще не всеми браузерами, он представляет собой отличную альтернативу XMLHttpRequest. Если вы хотите узнать, как вызывать Web API с помощью React, ознакомьтесь с этой статьей по данной теме.
