Що таке Promise у JavaScript і як швидко зрозуміти суть?

18.02.2025 11:01

~ 2 хв. читання

Обкладинка нотатки: Що таке Promise у JavaScript і як швидко зрозуміти суть?

Зміст дописунатисність на посилання, щоб перейти до потрібного місця

Простий приклад Promise Як швидко розібратися?

Уявіть, що ви замовили каву в кафе. Бариста приймає замовлення, видає чек і каже: «Трошки зачекайте». Ви не стоїте на місці, а можете піти сісти за столик, перевірити телефон чи відповісти на повідомлення. Коли кава готова, бариста кличе вас – і ви отримуєте результат.

Promise у JavaScript працює так само:

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

Простий приклад Promise

function makeCoffee() {
  return new Promise((resolve) => {
    console.log("Замовлення прийнято...");
    setTimeout(() => {
      resolve("☕ Готово! Ось ваша кава.");
    }, 2000);
  });
}

console.log("Я поки що гортаю телефон...");
makeCoffee().then((message) => console.log(message));

Спочатку виконається console.log("Я поки що гортаю телефон..."), бо проміс не блокує код.

Потім через 2 секунди з’явиться "☕ Готово! Ось ваша кава.", коли проміс завершиться.

Якщо щось піде не так (наприклад, кава закінчиться), ми можемо додати .catch():

function makeCoffee() {
  return new Promise((resolve, reject) => {
    const coffeeReady = Math.random() > 0.5; // випадковий успіх або невдача

    console.log("Замовлення прийнято...");
    setTimeout(() => {
      if (coffeeReady) {
        resolve("☕ Готово! Ось ваша кава.");
      } else {
        reject("❌ Вибачте, кава закінчилась.");
      }
    }, 2000);
  });
}

makeCoffee()
  .then((message) => console.log(message))
  .catch((error) => console.log(error));

Це як у реальному житті: якщо кави немає, бариста вибачається, і ти отримуєш відповідь про помилку.

Як швидко розібратися?

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

Але перш ніж почати експеременти з промісами - треба розібратись в структурі (resolve, reject, catch тощо). Про це є окремий допис.