Шпаргалка по 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);
}

Вывод

Эти шаблоны должны помочь вам в большинстве ситуаций.

Есть ли, то что мы пропустили из того, что вы используете ежедневно? Пишите в комментариях. :-)