Асинхронность в JS презентация

Ад коллбэков (callback hell)
Для обеспечения возможности общения клиента с серверами используются AJAX (от англ. "Asynchronous JavaScript and XML”) запросы.
До появления промисов и async/await использовались конструкции XMLHttpRequest, главный минус которых заключался в том, что при наличии зависимости одного запроса от предыдущего создавалась пирамидальная структура запросов вследствие обработки каждого нового запроса в коллбэке, образуя таким образом множественность вложенных коллбэков.

Ад коллбэков можно узнать по формированию “пирамидки” по вертикальной оси кода.
Для того, чтобы сделать структуру запросов “плоской” (убрать вложенность) была внедрена конструкция промисов.
Но перед разбором AJAX-запросов с использованием промисов рассмотрим работу рантайма JS, в частности - Event Loop.

Рантайм JS в браузере
Движок JS
Куча
Стек
Web APIs
click
fetch
timeout
geolocation
и другие
Очередь
load
timer
Цикл событий
Выполнение кода, примитивные данные
Хранение референсов (объекты, функции)

Event Loop
Стек
Глобальный контекст
Очередь микротасок
Web APIs
1
2
3
4
5
6
7
8
9
Очередь макротасок

Промисы: понятие и синтаксис
Промис - это особый объект, используемый в качестве плейсхолдера для будущего значения завершенной асинхронной операции.
Понятие
Синтаксис
Промис - это контейнер для будущего значения (не установленного на настоящий момент)

Промисы: пример

Возможные состояния промиса
Pending
Settled
Fulfilled
Rejected
Из состояния Settled в другое промис может перейти только единожды. Все попытки изменить состояние промиса после первого изменения будут проигнорированы.

Промисы: цепочка
promise(...)
.then(...)
.then(...)
.then(...)
Если очередной then вернул промис, то далее по цепочке будет передан не сам этот промис, а его результат.

Перехват ошибок
При возникновении ошибки – она отправляется в ближайший обработчик onRejected.
Такой обработчик нужно поставить через второй аргумент .then(..., onRejected) или, что то же самое, через .catch(onRejected).

Async/Await
Важно отметить, что async-функции работают поверх промисов.
Эти функции не являются принципиально другими концепциями.
Async-функции были задуманы как альтернатива коду, использующему промисы.
Используя конструкцию async/await, можно полностью избежать использование цепочек промисов.
С помощью async-функций возможно организовать работу с асинхронным кодом в синхронном стиле.
Async - это синтаксический сахар промисов.

Async/await: Синтаксис

Цепочка промисов
Async/await
=

При этом промисы и async/await возвращают response, который нужно в рамках отдельного шага преобразовывать с помощью метода .json().
В случае с async/await данный шаг можно визуально скипнуть:
=

Параллельное выполнение промисов
Комбинаторы промисов
Promise.all
Promise.any
Promise.allSettled
Promise.race
Завершен, когда все выполнены
Один reject - все игнорируются
Завершен, когда один fulfill
Завершен, когда все выполнены
Без разницы, reject или fulfill
Завершен, когда выполнен самый быстрый (даже reject)

Разница между комбинаторами промисов и множественными последовательными await/промисами в скорости запроса данных с сервера
Последовательное выполнение
692 мс
Параллельное выполнение
164 мс

Top-level await
Раньше ключевое слово await можно было использовать только в async функциях, что иногда требовало прибегать к использованию конструкции IIFE (immediately invoked function expression)