Справочник JavaScript

fetch

Отправляет HTTP-запрос и возвращает промис ответа.

Доступно с: Web API

Синтаксис

fetch(url, options)

Параметры

Параметр	Тип	Описание
url	string \| URL	Адрес запроса.
options	object	Необязательный. method, headers, body, signal и другие настройки запроса.

Возвращаемое значение

Promise<Response>Промис ответа: у него есть status, ok и методы json(), text().

Примеры

GET-запрос и разбор JSON:

const response = await fetch('https://api.example.com/users/1');
 
if (!response.ok) {
  throw new Error(`HTTP ${response.status}`);
}
 
const user = await response.json();
console.log(user.name);

Результат:

Anna

POST-запрос с JSON:

const response = await fetch('https://api.example.com/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Anna' }),
});
 
const created = await response.json();
console.log(created.id);

Результат:

Примечания

fetch() отклоняет промис только при сетевой ошибке. Ответы 404 и 500 считаются успешными, поэтому всегда проверяйте response.ok или response.status.

Примеры с fetch на этой странице не запускаются: им нужен настоящий сервер.

См. также

await — Ждёт результата промиса и возвращает его значение.
JSON.parse — Разбирает строку JSON и возвращает значение.
URLSearchParams — Читает и собирает параметры адреса (часть после ?).
Promise.prototype.catch — Обрабатывает ошибку промиса.

Вопросы и ответы по теме

В учебнике

Запросы к серверу: fetch — Функция fetch в JavaScript: GET- и POST-запросы, объект ответа, статус, response.ok, разбор JSON и обработка ошибок.

Спасибо, что читаете!