Урок 10 · 14 хв

Асинхронність

Запит іде довго. Код не чекає — отже, потрібен спосіб дочекатися.

Запит до сервера займає час. JavaScript не стоїть на місці: він надсилає запит і йде далі, а результат приходить пізніше. Тому потрібен спосіб сказати «коли дані прийдуть — зроби ось це».

Чому звичайний код тут не працює

Раніше це розв'язували колбеками: передавали функцію, яку викличуть потім. На двох-трьох вкладених запитах код перетворювався на драбину з дужок. Тепер замість колбека повертають Promise — об'єкт, який обіцяє значення пізніше.

Promise, then, catch

Можна спитати про це правило«Promise — контейнер, а не значення»

Можна спитати про цей пункт«Суть уроку»

async і await

Те саме, але лінійно

await ставиться всередині async-функції й чекає, доки проміс виконається. Сама async-функція завжди повертає проміс, навіть якщо всередині написано return 1. Тому її виклик теж доводиться await-ити або обробляти через .then().

Помилки: try/catch

Можна спитати про це правило«await без try/catch — необроблена помилка»

Можна спитати про цей пункт«async і await»

Послідовно й паралельно

Три await поспіль проти Promise.all

Promise.all бере масив промісів і чекає всі одразу. Якщо один відхилиться — відхилиться і весь all. Послідовний await залишай для випадку, коли другий запит залежить від результату першого.

Як це виглядає в реальному коді

Документація

MDN · Promise — стани, then, catch
MDN · async function — функція, яка завжди повертає проміс
MDN · await — зняти значення з проміса
MDN · Promise.all — запустити запити паралельно

Можна спитати про цей пункт«Послідовно й паралельно»

Перевірка

Закріпи, поки не пішов далі

1. Що надрукує console.log(loadTotal()), якщо функція повертає проміс?
2. Що поверне async function f() { return 1 } під час виклику?
3. Три незалежні запити. Як отримати результати найшвидше?
4. Проміс усередині await відхилився. Що станеться без try/catch?