img

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

Заключение

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

 

 

Ссылка
скопирована
Программирование
Скидка 25%
Python Advanced. Продвинутый курс
Освойте асинхронное и метапрограммирование, изучите аннотацию типов и напишите собственное приложение на FastAPI. Улучшите свои навыки Python, чтобы совершить быстрый рост вашего грейда до уровня middle.
Получи бесплатный
вводный урок!
Пожалуйста, укажите корректный e-mail
отправили вводный урок на твой e-mail!
Получи все материалы в telegram и ускорь обучение!
img
Еще по теме:
img
Введение Podman – это механизм управления OCI-контейнерами, который не требует запуска демон-процесса. Он нацелен на то, чтобы
img
За последние годы микросервисы прошли путь от обычного переоцененного модного словечка до вещи, которую вы, как специалист по пр
img
Введение Резидентные базы данных (или хранилища в памяти) по большей части делают упор на хранилище данных в памяти, а не на жес
img
  Многие люди рассуждают так: «зачем, ну зачем мне изучать еще один язык программирования?» Для них это лишнее, и они стараютс
img
Введение Объекты в Kubernetes – это базовые постоянные сущности, которые описывают состояние кластера Kubernetes. Модули – это э
img
  Довольно часто мы встречаемся с компонентами архитектуры программного обеспечения, которые являются частью любой системы, но п
Комментарии
ЛЕТНИЕ СКИДКИ
40%
50%
60%
До конца акции: 30 дней 24 : 59 : 59