Привет, товарищи веб-разработчики, на этой неделе я нашел для вас несколько действительно полезных ссылок на ES6 Fetch API, обещаю :)
Недавно мы начали рефакторинг асинхронных запросов из jQuery.ajax для извлечения API в качестве первого шага к уменьшению зависимости от устаревшего кода jQuery в проекте клиента. Рефакторинг запросов довольно прост — как только вы заметили сходства и различия Fetch API и jQuery.ajax. Сложная часть — это обработка возвращаемых данных, обещаний и ошибок.
Веб-документы MDN: Использование Fetch
Полная и хорошо написанная документация по Fetch API с большим количеством примеров кода и пояснений. Это хорошая отправная точка и справочный источник по Fetch API.
CSS-Tricks: Использование Fetch
Еще одна исчерпывающая статья Zell Liev об API Fetch с еще более подробной информацией и примерами кода. Очень важно понимать другой подход Fetch к обработке ошибок: в отличие от jQuery.ajax, Fetch отклоняет только сетевые ошибки. Все остальные коды состояния http считаются успешными и должны обрабатываться в функции тогда или отклоняться вручную.
Брэндон Морелли: Простое руководство по промисам ES6
Вся магия асинхронной обработки ответов на запросы с помощью Fetch выполняется с помощью промисов ES6, поэтому при использовании Fetch важно изучить и понять ES6 Promise API. Из-за jQuery deferred, Promise API был самой сложной частью нашего пути рефакторинга.
Мэтт Берджесс: Как получать данные в 2018 году: Fetch
Обзор различных подходов к получению данных из серверной части и API. В своей части, посвященной Fetch, Мэтт отмечает, что получение данных с помощью response.json() вопреки здравому смыслу возвращает не JSON-данные, а читаемый поток, который сам должен обрабатываться как обещание.
JavaScript.info: Promise API
Класс Promise предоставляет четыре статических метода: разрешение, отклонение, все и гонка. Наиболее интересным для нас оказался Promise.all, позволяющий параллельно вызывать несколько запросов.