Fetch API

@serverSerrverlesskiy

Fetch API позволяет JavaScript обмениваться данными с сервером с помощью HTTP-запросов и является более совершенной заменой классу XMLHttpRequest. Выполнение запросов осуществляется методом fetch(), который возвращает Promise.

Exchange

Синтаксис

Book

fetch(url, { options })

url - URL для отправки запроса;
options - параметры запроса.

Задав метод fetch() без options вы получите GET-запрос, скачивающий данные по адресу URL.

Видео

Параметры запроса

Option

Вторым аргументом {options} принимаются параметры запроса. Список параметров:

method - метод запроса (GET, POST, PUT, DELETE, HEAD);
headers - HTTP-заголовки;
body - тело запроса (используется при method: POST / PUT);
cache - режим кэширования (default, reload, no-cache);
mode - режим запроса (cors, no-cors, same-origin);
redirect - указывает, как обрабатывать перенаправления(follow, error, manual);
referrer - реферер запроса;
signal - AbortSignal, прерывание запроса;
credentials - отправка cookies вместе с запросом - mit, same-origin.

fetch('https://jsonplaceholder.typicode.com/users', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  },
  mode: 'no-cors'
})

Получение ответа

Bascketball

Метод fetch() возвращает Promise объект класса Response, который имеет следующие свойства:

status - код ответа;
statusText - текстовое сообщение, соответствующее коду ответа;
ok - логическое значение, указывающее на успешность кода ответа (true: 200-299);
headers - объект с заголовками ответа, в котором ключ - наименование заголовка, а значение ключа - значение соответствующего ключу заголовка;
url - URL, на который был отправлен запрос;
body - данные ответа в формате ReadableStream
bodyUsed - логическое значение, указывающее на чтение данных.

fetch('https://jsonplaceholder.typicode.com/users').then(response => console.log(response))

Обработка ответа

Download

Переданные данные находятся в формате ReadableStream. Для изменения формата можно использовать следующие методы:

text() - преобразует ответ в строку;
json() - преобразует ответ в формате JSON;
blob() - преобразует ответ в объект Blob;
formData() - конвертируется ответ в экземпляр FormData;
arrayBuffer() - преобразует ответ в объект ArrayBuffer.

Пример преобразование ответа в формат JSON.

fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json())
  .then(data => console.log(data))

Обработка ошибок

Error

Узнать завершился ли fetch() с ошибкой мы можем с помощью свойств: "status" и "ok".

fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => {
    if (!response.ok) {
      console.log('Что-то пошло не так... Статус: ' + response.status)
    } else {
      return response.json()
    }
  })
  .then(data => console.log(data))

При помощи .catch()

fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error))

Примеры запросов

Math

fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json())
  .then(data => console.log(data[0].name + ' and ' + data[2].name))
  .catch(error => console.log(error))

То же самое, при помощи синтаксиса async/await подробнее с которым мы познакомимся в следующей статье.

let response = await fetch('https://jsonplaceholder.typicode.com/users')
let data = await response.json()
console.log(data[0].name + ' and ' + data[2].name)