Отправка и получение запросов через Интернет без AJAX и jQuery

Fetch API JavaScript — это мощная и простая в использовании альтернатива старым AJAX и jQuery.
Используя Fetch API, вы получаете простой в использовании API и избавляетесь от раздутого и нежелательного кода jQuery, делая приложения по сравнению с ними более легкими.
В этой статье мы обсудим, как реализовать и использовать Fetch API.
Что такое Fetch API
Согласно документам MDN,
Fetch API предоставляет интерфейс для получения ресурсов (в том числе по сети). Он покажется знакомым любому, кто использовал XMLHttpRequest, но новый API предоставляет более мощный и гибкий набор функций.
Как работает Fetch API
Метод fetch() принимает один обязательный аргумент — путь к ресурсу. Он возвращает обещание, которое разрешает ответ на этот запрос — как только сервер отвечает заголовками — даже если ответ сервера имеет статус ошибки HTTP.
Fetch API в действии
В этой статье мы будем использовать API-заполнитель JSON, чтобы имитировать работу с реальным API.
Базовый запрос на выборку очень легко настроить. Ниже приведен пример:

Метод fetch() по умолчанию выполняет метод GET. Результат/ответ выглядит следующим образом.

Метод fetch() также принимает другой необязательный параметр, init объект с дополнительной информацией/параметрами о запросе. Нажмите здесь, чтобы узнать об этих опциях подробнее.
Для метода POST требуется объект init.

Результат дает нам идентификатор вновь созданного поста.

Аналогичным образом мы можем использовать методы PATCH, DELETE, PUT и т. д.
Для получения дополнительной информации и примеров обратитесь к Документации MDN по использованию Fetch.
Ссылка на другие мои статьи:
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Присоединяйтесь к нашему сообществу Discord.