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

Почти каждому проекту необходимо так или иначе взаимодействовать с внешним миром. Если вы работаете со средами 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);
}

Заключение

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