- Разработка
- Шпаргалка по Fetch API: девять самых распространенных запросов API
Шпаргалка по Fetch API: девять самых распространенных запросов API

В данной статье мы перечислим 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 с токеном авторизации (Bearer) в 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
API Fetch возвращает обещание. Вот почему используют .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);
}
Вывод
Эти шаблоны должны помочь вам в большинстве ситуаций.
Есть ли, то что мы пропустили из того, что вы используете ежедневно? Пишите в комментариях. :-)
Комментарии ()
Написать комментарий