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

18 Feb 11:01

2 min. read

meme code

@memecode

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

Table of contentsClick link to navigate to the desired location

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

This content has not been translated yet.We're showing the original Ukrainian content below.

Switch to Ukrainian Translate with Google

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

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 тощо). Про це є окремий допис.