Метод fetch() позволяет нам делать запросы, схожие с XMLHttpRequest (XHR). Основное отличие заключается в том, что Fetch API использует Promises (Обещания), которые позволяют использовать более простое и чистое API, избегать катастрофического количества callback’ов и необходимости помнить API для XMLHttpRequest.

Он не поддерживается старыми (можно использовать полифил), но поддерживается всеми современными браузерами.

Базовый синтаксис:

let promise = fetch(url, [options])`

• url – URL для отправки запроса.
• options – дополнительные параметры: метод, заголовки и так далее Без options это простой GET -запрос, скачивающий содержимое по адресу url.

Процесс получения ответа обычно происходит в два этапа.

1. promise выполняется с объектом встроенного класса Response в качестве результата, как только сервер пришлёт заголовки ответа. На этом этапе мы можем проверить статус HTTP-запрос и определить, выполнился ли он успешно, а также посмотреть заголовки, но пока без тела ответа. Промис завершается с ошибкой, если fetch не смог выполнить HTTP-запрос, например при ошибке сети или если нет такого сайта. HTTP-статусы 404 и 500 не являются ошибкой. Мы можем увидеть HTTP-статус в свойствах ответа: - status – код статуса HTTP-запроса, например 200. - ok – логическое значение: будет true, если код HTTP-статуса в диапазоне 200-299.

Например:

let response = await fetch(url);
 
if (response.ok) {
// если HTTP-статус в диапазоне 200-299
// получаем тело ответа (см. про этот метод ниже)
	let json = await response.json();
} else {
	alert("Ошибка HTTP: " + response.status);
}`

2. Для получения тела ответа нам нужно использовать дополнительный вызов метода Response предоставляет несколько методов, основанных на промисах, для доступа к телу ответа в различных форматах: - response.text() – читает ответ и возвращает как обычный текст, - response.json() – декодирует ответ в формате JSON, - response.formData() – возвращает ответ как объект FormData (разберём его в следующей главе), - response.blob() – возвращает объект как Blob (бинарные данные с типом), - response.arrayBuffer() – возвращает ответ как ArrayBuffer (низкоуровневое представление бинарных данных), - помимо этого, response.body – это объект ReadableStream, с помощью которого можно считывать тело запроса по частям. Мы рассмотрим и такой пример несколько позже.

Типичный запрос с помощью fetch состоит из двух операторов await:

let response = await fetch(url, options) // завершается с заголовками ответа
let result = await response.json() // читать тело ответа в формате JSON`

Или, без await:

fetch(url, options)
	.then(response => response.json())
	.then(result => /* обрабатываем результат */)`

Назад