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-программист с нуля
Стань разработчиком на одном из самых популярных языков программирования.
Получи бесплатный
вводный урок!
Пожалуйста, укажите корректный e-mail
отправили вводный урок на твой e-mail!
Получи все материалы в telegram и ускорь обучение!
img
Еще по теме:
img
За последние годы микрослужбы прошли путь от обычного переоцененного модного словечка до вещи, которую вы, как специалист по про
img
Введение Резидентные базы данных (или хранилища в памяти) по большей части делают упор на хранилище данных в памяти, а не на жес
img
  Многие люди рассуждают так: «зачем, ну зачем мне изучать еще один язык программирования?» Для них это лишнее, и они стараютс
img
Введение Объекты в Kubernetes – это базовые постоянные сущности, которые описывают состояние кластера Kubernetes. Модули – это э
img
  Довольно часто мы встречаемся с компонентами архитектуры программного обеспечения, которые являются частью любой системы, но п
img
  Ключевые отличия между JDK, JRE и JVM: JDK – это набор средств для разработки программного обеспечения, JRE – это програ
Комментарии
ЛЕТНИЕ СКИДКИ
40%
50%
60%
До конца акции: 30 дней 24 : 59 : 59