Fetch запросы

Разделы:

Response объект
Объект body
Опции fetch
Примеры кода
Дополнительно

Виды запросов

Запрос	Описание	Пример использования
GET	простой запрос одной строкой на получение данных, может содержать переменные в адресе	получаем список товаров, получаем текстовые данные или скачиваем файл, получаем данные в виде объекта, поиск товара (фильтрация)
POST	простой запрос на отправку данных серверу, может передавать данные разного типа	создаём новую запись, отправляем сообщение, создаём профиль, загружаем файл
PUT	запрос на обновление данных на сервере, данных для обновления может быть несколько	обновляем данные о товаре, изменили статью в блоге, изменили профиль пользователя
PATCH	очень похож на метод PUT, поскольку он также изменяет существующий ресурс, разница лишь в том, что тело запроса должно содержать только одно конкретное изменение в ресурсе. В то время как в PUT, если не передать какое-то одно из ожидаемых полей, то сервер перезапишет в базе это поле на пустое либо вернёт ошибку.	изменяет одну конкретную вещь, обновляем цену на товаре, изменили статус аккаунта, изменили аватар
DELETE	запрос на удаление данных с сервера	удалили пост, запись, товар, профиль, страницу на сайте, очистили историю переписки

Таблица свойств запросов:

Свойства	PUT	PATCH	GET	POST	DELETE
Запрос имеет тело	Да	Да	Нет	Да	Может
Успешный ответ имеет тело	Нет	Да	Да	Да	Может
Меняет состояние сервера	Да	Да	Нет	Да	Да
Идемпотентный	Да	Нет	Да	Нет	Да
Кэшируемый	Нет	Нет	Да	Может	Нет
Допускается в HTML-формах	Нет	Нет	Да	Да	Нет

Метод HTTP является идемпотентным, если повторный идентичный запрос, сделанный один или несколько раз подряд, имеет один и тот же эффект, не изменяющий состояние сервера. Другими словами, идемпотентный метод не должен иметь никаких побочных эффектов (side-effects), кроме сбора статистики или подобных операций.

Response объект

Response из Fetch API представляет собой ответ на запрос.

Таблица свойств объекта:

Свойства	Описание
response.headers	описывает заголовок ответа
response.ok	булевое значение, которое указывает, выполнился ли запрос успешно или нет (то есть находится ли код ответа в диапазоне 200–299)
response.redirected	является ли результат запроса перенаправлением
response.status	код ответа
response.statusText	строка, соответствующая коду ответа (например, OK для кода 200)
response.type	тип ответа (например, базовый, cors)
response.url	URL-адрес ответа
response.body	объект ReadableStream, с помощью которого можно считывать тело запроса по частям

Таблица методов объекта:

Методы	Описание
response.clone()	создает клон объекта Response
response.error()	возвращает новый объект Response, связанный с сетевой ошибкой
response.redirect()	создает новый ответ с другим URL
response.text()	читает ответ и возвращает как обычный текст
response.json()	декодирует ответ в формате JSON
response.formData()	возвращает ответ как объект FormData
response.blob()	возвращает объект как Blob (бинарные данные с типом)
response.arrayBuffer()	возвращает ответ как ArrayBuffer (низкоуровневое представление бинарных данных)

Объект body

♦ response.body

Свойства интерфейса body:

Свойство	Описание
body.body	простой геттер, предоставляющий ReadableStream содержимого тела
body.bodyUsed	сохраняет логическое значение, указывающее, использовалось ли тело ответа в ответе

Методы интерфейса body:

Методы	Возвращает	Описание
body.arrayBuffer()	промис	принимает поток ответа и читает его до конца, по завершении в resolve возвращает ArrayBuffer
body.blob()	промис	принимает поток ответа и читает его до конца, по завершении в resolve возвращает Blob
body.formData()	промис	принимает поток ответа и читает его до конца, по завершении в resolve возвращает FormData
body.json()	промис	принимает поток ответа и читает его до конца, по завершении в resolve возвращает JSON
body.text()	промис	принимает поток ответа и читает его до конца, по завершении в resolve возвращает Text

Опции fetch

Свойства	Параметры	Описание
method	GET, POST, PUT, DELETE, PATCH и т.д.	типы запросов
headers	‘Content-Type’: ‘text/plain;charset=UTF-8’ ‘Content-Type’: ‘application/x-www-form-urlencoded’ ‘Content-Type’: ‘multipart/form-data’ ‘Content-Type’: ‘text/plain’ ‘Content-Type’: ‘application/json’ и т.д.	объект с запрашиваемыми заголовками (не все заголовки разрешены)
body	string, FormData, BufferSource, Blob или UrlSearchParams	данные для отправки (тело запроса)
referrer	‘about:client’, URL адрес или пустая строка что бы не чего не отправлять	посылает заголовок Referer
referrerPolicy	strict-origin-when-cross-origin, no-referrer-when-downgrade, no-referrer, origin, same-origin и т.д.	установка политики реферера
mode	cors, same-origin, no-cors	защита от нечаянной отправки запроса на другой источник
credentials	same-origin, omit, include	указывает, должен ли `fetch` отправлять куки и авторизационные заголовки HTTP вместе с запросом
cache	default, no-store, reload, no-cache, force-cache или only-if-cached	HTTP-кеширование
redirect	follow, manual, error	HTTP-редирект
integrity	контрольная сумма, например ‘sha256-abcdef1234567890’	позволяет проверить, соответствует ли ответ известной заранее контрольной сумме
keepalive	false, true	указывает на то, что запрос может «пережить» страницу, которая его отправила
signal	undefined, AbortController	следим за булевым значением чтобы прервать запрос
window	window, null	объект window

Примеры кода

POST запрос:


// передаём данные в виде Json объекта
(async ()=>{
const response = await fetch(url, {
	method: 'POST', // или 'PUT', 'PATCH'  
	body: JSON.stringify(data),
	headers: {
	'Content-Type': 'application/json'
	}
});

if(response.ok && response.status === 200){
	const json = await response.json();
	console.log('Ответ:', JSON.stringify(json));
}
})();

GET запрос:


// получаем данные от сервера в виде текста
(async ()=>{
  const response = await fetch(url);
  
  if(response.ok && response.status === 200){
	  const data = await response.text();
	  
	  console.log('Ответ:', data);
  }  
})();
  
// то же самое, другой вариант.
(async ()=>{
const response = await fetch(url, {
	method: 'GET', // или DELETE
	headers: {
	'Content-Type': 'text/plain;charset=UTF-8'
	}
});

if(response.ok && response.status === 200){
	const json = await response.json();
	console.log('Ответ:', JSON.stringify(json));
}
})();

Использование класса AbortController:


const controller = new AbortController();
const signal = controller.signal;

signal.addEventListener('abort', () => console.log('отмена'));

controller.abort(); // после этого будет вызвано событие abort


// Остановить Fetch запрос:

const controller = new AbortController();
fetch(url, {
  signal: controller.signal
});

controller.abort(); // запрос будет прерван

Дополнительно

Код ответа от сервера:

Информационные 100 — 199
Успешные 200 — 299
Перенаправления 300 — 399
Клиентские ошибки 400 — 499
Серверные ошибки 500 — 599