𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗣𝗿𝗼𝗺𝗶𝘀𝗲𝘀 𝗮𝗻𝗱 𝗔𝘀𝘆𝗻𝗰/𝗔𝘄𝗮𝗶𝘁 𝗘𝘅𝗽𝗹𝗮𝗶𝗻𝗲𝗱 (Объяснение 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