Love Frontend
Сообщество
фронтенд разработчиков
EN

Как использовать fetch?

Автор: Kamil Ocean
Дата публикации: 17.01.2020

Что такое fetch?

Fetch пришёл на замену XMLHttpRequest и позволяет нам делать запросы на сервер, получать ответы и обрабатывать их. Всё это работает на промиссах.

Аргументы, которые принимает fetch

Метод fetch() принимает один обязательный аргумент и необязательный - опции запроса.

Что возвращает?

После завершения выполнения fetch() в любом случае вернёт вам Promise

Примеры использования fetch

Мы узнали, что возможно сделать запрос используя только один аргумент - адрес запроса.

fetch('https://example')
.then(res => res.json())
.then(json => console.log(json))

В данном случае вызывая fetch() только с одним аргументом - со строкой адреса, куда нужно делать запрос, мы выполняем GET запрос по этому адресу.

Обратите внимание, после запроса нам возвращается специальный объект Stream, поэтому нам обязательно нужно сделать .then(res => res.json())

И уже после этого в следующем then() мы можем обрабатывать результат нашего запроса.

Конечно мы можем использовать async/await

const res = await fetch('https://example')
const good = await res.json();
console.log(JSON.stringify(good));

Fetch POST

Теперь сделаем POST запрос и передадим для этого объект с опциями.

fetch('https://example', {
method: 'post',
headers: {
"Content-type": "application/x-www-form-urlencoded"
},
body: 'good=bad&bad=awesome'
})
.then(res => res.json())
.then(data => {
console.log('data');
})
.catch(error => {
console.log('Request failed', error);
});

Все свойства объекта опций fetch

Пример отправки на сервер данных в формате JSON

const data = { good: 'bad'};

fetch(url, {
method: 'POST',
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json'
}
});

Какие ещё важные вещи необходимо знать?

Если на запрос придёт ответ со статусом HTTP 4** или 5**, то сам промисс не будет считаться ошибкой и будет выполнен в нормальном режиме, но со значением false в статусе ok

Поэтому, если вам нужно завершить промисс при получении заголовков с ошибкой, то это нужно обрабатывать самому, например так:

fetch('https://example')
.then(res => {
if (response.status !== 200) {
console.log('Status Code: ' + response.status);
return;
}
// код в случае успешного ответа
})

Поддержка браузерами

fetch не поддерживается в IE и частично поддерживается в Edge. Но есть отличный полифилл, который позволит вам не переживать о поддержке: fetch полифилл

Отмена запроса

На сегодня существует экспериментальная технология AbortController

get by fetch await by fetch post by fetch post json by fetch

Оставьте свой e-mail чтобы получать уведомления о свежих статьях.