Основы Fetch API в JavaScript

Development | Amber | Комментировать запись

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));

Вы получите:

Ooops, error 404

Полизаполнения

Если вам нужна поддержка старых браузеров, таких как Internet Explorer 11, вам потребуется использовать полизаполнение Fetch (например, вот это с Github).

Если вам нужно использовать Fetch в Node.js, тут существует два наиболее популярных варианта полизаполнения – isomorphic-fetch и node-fetch.

Полезные данные о поддержке Fetch API основными браузерами можно найти здесь.