Почти каждому проекту необходимо так или иначе взаимодействовать с внешним миром. Если вы работаете со средами JavaScript, то, вероятнее всего, для этой цели вы будете использовать Fetch API.
Но задумайтесь, когда вы работаете с API, помните ли вы синтаксические конструкции наизусть или вам все-таки нужны небольшие подсказки?
Я написал большое количество статей о JavaScript и о вещах, с ним связанных. И я сделал это только для того, чтобы потом я мог частенько (заново) посещать их, чтобы освежить свою память или позаимствовать какой-нибудь пример кода, который, как я помню, «где-то был».
В этой статье я постараюсь создать еще один примерно подобный ресурс. Я перечислю 9 самых распространенных запросов Fetch API.
Я уверен, что вы их использовали, и далеко не раз. Но было бы прекрасно не искать в старых проектах синтаксическую конструкцию того конкретного запроса, что вы использовали полгода назад? ?
Для чего нужен Fetch API?
Нас уже успели избаловать всеми службами, которые предоставляют хорошие SDK, которые абстрагируются от реальных запросов API. Мы просто запрашиваем данные с помощью обычных языковых конструкций, и даже не задумываемся о самом процессе обмена данными.
Но что, если у платформы, которую мы выбрали, нет SDK? Или что, если вы создаете как сервер, так и клиента? В таких случаях вам нужно будет обрабатывать запросы самостоятельно. И вот как это можно сделать с помощью Fetch API.
Простой запрос GET с помощью Fetch API
fetch('{url}')
.then(response => console.log(response));Простой запрос POST с помощью Fetch API
fetch('{url}', {
method: 'post'
})
.then(response => console.log(response));Запрос GET с маркером авторизации (токеном на предъявителя) в Fetch API
fetch('{url}', {
headers: {
'Authorization': 'Basic {token}'
}
})
.then(response => console.log(response));Запрос GET с данными строки запроса в Fetch API
fetch('{url}?var1=value1&var2=value2')
.then(response => console.log(response));Запрос GET с CORS в Fetch API
fetch('{url}', {
mode: 'cors'
})
.then(response => console.log(response));Запрос POST с маркером авторизации и данными строки запроса в Fetch API
fetch('{url}?var1=value1&var2=value2', {
method: 'post',
headers: {
'Authorization': 'Bearer {token}'
}
})
.then(response => console.log(response));Запрос POST с данными формы в Fetch API
let formData = new FormData();
formData.append('field1', 'value1');
formData.append('field2', 'value2');
fetch('{url}', {
method: 'post',
body: formData
})
.then(response => console.log(response));Запрос POST с данными JSON в Fetch API
fetch('{url}', {
method: 'post',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
'field1': 'value1',
'field2': 'value2'
})
})
.then(response => console.log(response));Запрос POST с данными JSON и CORS в Fetch API
fetch('{url}', {
method: 'post',
mode: 'cors',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
'field1': 'value1',
'field2': 'value2'
})
})
.then(response => console.log(response));Как обработать результат запроса Fetch API
Fetch API возвращает Promise (промис). Именно поэтому я всегда использую .then() и функцию обратного вызова для того, чтобы обработать ответ:
fetch(...).then(response => {
// process the response
}Но, если находитесь в асинхронной функции, вы можете просто дождаться результата:
async function getData(){
let data = await fetch(...);
// process the response
}А теперь давайте посмотрим на то, как мы можем извлечь данные из полученного ответа.
Как проверить код состояния ответа Fetch API
Когда мы отправляем запросы POST, PATCH и PUT, чаще всего нас интересует возвращаемый код состояния:
fetch(...)
.then(response => {
if (response.status == 200){
// all OK
} else {
console.log(response.statusText);
}
});Как получить обычное число из ответа Fetch API
Некоторые конечные точки API могут отправлять обратно идентификатор новой записи базы данных, которая была создана с помощью ваших же данных:
var userId;
fetch(...)
.then(response => response.text())
.then(id => {
userId = id;
console.log(userId)
});Как конвертировать данные JSON из ответа Fetch API
Чаще всего в теле ответа вы получаете данные JSON:
var dataObj;
fetch(...)
.then(response => response.json())
.then(data => {
dataObj = data;
console.log(dataObj)
});Помните о том, что вы сможете получить доступ к этим данным только после того, как разрешите оба промиса. Иногда это может создавать путаницу, поэтому я больше предпочитаю использовать асинхронные методы и дожидаться результатов:
async function getData(){
var dataObj;
const response = await fetch(...);
const data = await response.json();
dataObj = data;
console.log(dataObj);
}Заключение
Эти примеры должны прикрыть вас в большинстве ситуаций.
