Вы просили — мы сделали: шпаргалка по fetch() — одному из лучших инструментов для работы с HTTP-запросами!
Вообще-то обрабатывать сетевые запросы в JavaScript можно разными способами. Раньше все пользовались XMLHttpRequest, но этот интерфейс устарел, а на смену ему пришёл куда более простой и гибкий Fetch API.
Функция fetch() принимает два параметра:
обязательный url — адрес для отправки запроса,
необязательный options.
Причём fetch() без options — это обыкновенный GET-запрос, который просто скачивает данные по указанному URL.
А вот с помощью options его можно настроить: например, выбрать HTTP-метод (method), добавить заголовок (headers), прикрепить данные для отправки (body) или включить cookies (credentials).
Возвращает функция так называемые обещания (promise) — удобную альтернативу обратным вызовам (callbacks) при управлении асинхронными процессами.
Promise — особый объект, хранящий, помимо значения, информацию о своём состоянии: «ожидание» (pending), «выполнен» (fulfilled) или «отклонён» (rejected).
Пока promise находится «в ожидании», он не имеет значения, но может в любой момент перейти в другое состояние и получить его. Как только сервер отвечает, promise выполняется или отклоняется и возвращает объект встроенного класса response с полученным значением или причиной отказа.
Объект response хранит в себе статус HTTP-запроса и, если он выполнился успешно, заголовок ответа. Тело ответа можно получить в разных форматах: от простого текста до бинарного массива — нужно только выбрать подходящий метод. Самые популярные варианты:
response.text() для обычного текста,
response.json() для формата JSON.
P.S. Обратите внимание, когда сервер отвечает на fetch() сообщением об ошибке, promise не отклоняется автоматически: ведь сам запрос успешно произошёл. Следует помнить про такие случаи и при необходимости обрабатывать их вручную.