Пояснення JavaScript Promises та Async/Await

Уявіть, що ви замовляєте піцу онлайн.

Ви не стоїте біля дверей без діла, поки вона не приїде. Ви дивитеся відео, працюєте або спілкуєтеся з друзями. Коли піца прибуває, ви її їсте.

JavaScript працює так само.

Такі завдання, як API-запити або виклики бази даних, потребують часу. Якби JavaScript чекав на виконання кожного завдання, ваш додаток би завис. Замість цього він продовжує виконувати інший код, поки чекає.

Promise представляє значення, яке з'явиться в майбутньому.

Promise має три стани:

Ви рідко бачите код, який використовується для створення нового Promise. Це тому, що сучасні інструменти, такі як fetch(), вже повертають Promise за вас.

Що робить .then()?

Багато хто вважає, що .then() отримує дані. Це не так.

.then() реєструє функцію зворотного виклику (callback). Ви кажете JavaScript: «Коли цей Promise завершиться, виконай цю функцію».

Це схоже на додаток для доставки. Ви замовляєте їжу, і додаток каже: «Поклич мене, коли їжа прибуде». Функція чекає на результат.

Навіщо використовувати Async/Await?

Ви можете вибудовувати ланцюжки викликів .then(), щоб отримати дані користувача, потім пости, а потім коментарі. Це працює, але довгі ланцюжки важко читати.

Async/await робить код схожим на звичайний покроковий код. Він чистіший і його легше розуміти.

Чи блокує await JavaScript?

Це поширене питання на співбесідах. Відповідь — ні.

Коли JavaScript стикається з ключовим словом await, він призупиняє лише цю конкретну async функцію. Решта вашого додатка продовжує працювати.

Приклад робочого процесу:

  1. Виконання коду в async функції.
  2. Досягнення await і призупинення цієї функції.
  3. Виконання решти додатка.
  4. Коли завдання завершується, виконання async функції відновлюється.

Async/await — це просто чистіший спосіб написання Promise. Це синтаксичний цукор.

Основні висновки:

Джерело: https://dev.to/aarthirs/javascript-promises-asyncawait-explained-with-a-real-life-example-43bm