𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗣𝗿𝗼𝗺𝗶𝘀𝗲𝘀 𝗔𝗻𝗱 𝗔𝘀𝘆𝗻𝗰/𝗔𝘄𝗮𝗶𝘁 𝗘𝘅𝗽𝗹𝗮𝗶𝗻𝗲𝗱
Представьте, что вы заказываете пиццу онлайн.
Вы делаете заказ. Вы не стоите у двери без дела, ожидая его доставки. Вы смотрите видео, работаете или общаетесь с друзьями. Когда пицца приезжает, вы её едите.
JavaScript работает точно так же.
Такие операции, как API-запросы, вызовы базы данных и таймеры, требуют времени. Если бы JavaScript ждал завершения каждой задачи, ваше приложение бы зависло. Вместо этого JavaScript выполняет другой код, пока ожидает результатов.
Что такое Promise?
Promise — это заполнитель для значения, которое вы получите в будущем.
Когда вы запускаете:
const promise = fetch("/users");
Данных ещё нет. Promise говорит: «У меня сейчас нет результата, но я сообщу вам, когда он будет готов».
Promise имеет три состояния:
- Pending (Ожидание)
- Fulfilled (Выполнено)
- Rejected (Отклонено)
Большинство современных API, таких как fetch(), автоматически возвращают Promise. Вам не нужно создавать их вручную каждый раз. Вы просто используете их.
Что делает .then()?
Многие думают, что .then() извлекает данные. Это не так.
.then() регистрирует функцию обратного вызова (callback). Вы говорите JavaScript: «Когда этот Promise завершится, выполни эту конкретную функцию».
Это похоже на приложение для доставки еды. Вы заказываете еду, и приложение говорит вам: «Позвони мне, когда еда приедет». Функция ждет сигнала.
Зачем использовать Async/Await?
Вы можете выстраивать цепочки вызовов .then(), чтобы получать данные шаг за шагом. Это работает, но длинные цепочки трудно читать.
Async/await делает ваш код похожим на обычный последовательный код. Он чище и его легче читать.
Блокирует ли await JavaScript?
Это частый вопрос на собеседовании. Ответ — нет.
Когда JavaScript встречает ключевое слово await, он приостанавливает только эту конкретную async функцию. Остальная часть вашего приложения продолжает работать.
Пример процесса:
- Выполняется код внутри функции.
- Достигается
await, и функция приостанавливается. - Выполняется остальная часть скрипта.
- Как только задача завершается, выполнение функции возобновляется.
Итог:
- Promise = Будущее значение.
fetch()= Возвращает Promise..then()= Выполни эту функцию, когда всё будет готово.await= Приостанови эту функцию, а не всю программу.async/await= Более чистый способ работы с Promise.
Источник: https://dev.to/aarthirs/javascript-promises-asyncawait-explained-with-a-real-life-example-43bm