Что такое fetch API?

Интерфейс Fetch API представляет собой современный, мощный и стандартный способ выполнения сетевых HTTP-запросов в JavaScript, пришедший на смену устаревшему и громоздкому XMLHttpRequest. Базовое использование сводится к вызову функции fetch(url, options), куда передается целевой адрес и необязательный объект с настройками, такими как метод, заголовки и тело запроса. В ответ метод возвращает Promise, который разрешается объектом ответа (Response) сразу же, как только сервер присылает заголовки, не дожидаясь загрузки всего тела ответа.

Для извлечения полезных данных из полученного ответа предусмотрены специальные асинхронные методы объекта Response. Чаще всего используется response.json() для парсинга JSON-данных, но также доступны response.text() для работы с простым текстом или HTML, и response.blob() для скачивания бинарных файлов, изображений или аудио. Эти методы также возвращают промисы, поэтому для получения окончательного результата к ним необходимо применять оператор await.

При работе с Fetch API разработчикам следует помнить о важной архитектурной особенности: промис, возвращаемый функцией fetch, отклоняется (переходит в состояние rejected) только в случае серьезных сетевых сбоев, например, при полном отсутствии подключения к интернету или ошибках DNS. Если же сервер отвечает кодами ошибок 404 (Не найдено) или 500 (Внутренняя ошибка сервера), промис всё равно будет считаться успешным. Именно поэтому после вызова fetch всегда необходимо проверять флаг response.ok или самостоятельно анализировать свойство response.status.