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

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

📝 Автор/ка: memecode : 18.02.2025 11:01
Зміст дописунатисність на посилання, щоб перейти до потрібного місця
Простий приклад PromiseЯк швидко розібратися?
Уявіть, що ви замовили каву в кафе. Бариста приймає замовлення, видає чек і каже: «Трошки зачекайте». Ви не стоїте на місці, а можете піти сісти за столик, перевірити телефон чи відповісти на повідомлення. Коли кава готова, бариста кличе вас – і ви отримуєте результат.
Promise у JavaScript працює так само:
  1. Ви запускаєте запит (наприклад, на сервер) і отримуєте обіцянку (Promise (проміс)), що відповідь буде пізніше.
  2. JavaScript не зупиняє виконання коду – він продовжує виконувати інші задачі.
  3. Коли результат готовий, Promise повідомляє про це, і ви можете його обробити.

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

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

console.log("Я поки що гортаю телефон...");
makeCoffee().then((message) => console.log(message));
Спочатку виконається console.log("Я поки що гортаю телефон..."), бо проміс не блокує код.
Потім через 2 секунди з’явиться "☕ Готово! Ось ваша кава.", коли проміс завершиться.
promise_example_1.png
Якщо щось піде не так (наприклад, кава закінчиться), ми можемо додати .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));
Це як у реальному житті: якщо кави немає, бариста вибачається, і ти отримуєш відповідь про помилку.
promise_example_2.png

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

Пробуйте писати проміси самостійно: зробіть функцію, яка чекає 3 секунди перед відповіддю, або яка випадково завершується помилкою. Таким чином можна швидко зрозуміти, як працює асинхронний код.
Але перш ніж почати експеременти з промісами - треба розібратись в структурі (resolve, reject, catch тощо). Про це є окремий допис.
Категорії: Програмування
🤖 Категорії підібрані ШІ: Програмне забезпечення
18.02.2025 11:01💭 0

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

Якщо ви хочете процитувати цей допис у своїй роботі, статті, блозі, використовуйте наведену нижче інформацію.

Розгорнути деталі


🙌 Підтримати блог @memecode

Ви можете поширити цей допис у соцмережах, чим допоможете платформі цейво розвиватись (* ^ ω ^)

📝 Більше публікацій:
Обкладинка нотатки: Чим відрізняються spec_helper.rb і rails_helper.rb у RSpec?
Чим відрізняються spec_helper.rb і rails_helper.rb у RSpec?
📝 Автор/ка: memecode
08.12.2024 13:53
[Фікс] No such file or directory @ rb_sysopen - tmp/pids/server.pid
📝 Автор/ка: memecode
09.12.2024 14:50
Обкладинка нотатки: Що потрібно знати, щоб побудувати успішну кар'єру на фрілансі в IT
Що потрібно знати, щоб побудувати успішну кар'єру на фрілансі в IT
📝 Автор/ка: memecode
23.12.2024 16:03
Обкладинка нотатки: Віртуальний хмарний сервер: що це таке та в чому його особливість
Віртуальний хмарний сервер: що це таке та в чому його особливість
📝 Автор/ка: memecode
03.01.2025 10:58
Обкладинка нотатки: [Fix] Heroku / SearchBox addon - помилка ідексації "The client is unable to verify that the server is Elasticsearch"
[Fix] Heroku / SearchBox addon - помилка ідексації "The client is unable to verify that the server is Elasticsearch"
📝 Автор/ка: memecode
31.01.2025 13:09
Фікс помилки [DEPRECATION] #adapters is deprecated. Use #profiles instead. (Codecov / docile)
📝 Автор/ка: memecode
06.02.2025 15:31
Обкладинка нотатки: Структура Promise (JavaScript) та як з цим працювати
Структура Promise (JavaScript) та як з цим працювати
📝 Автор/ка: memecode
18.02.2025 14:33
Обкладинка нотатки: Що таке Memoization (приклади Ruby та Ruby on Rails)?
Що таке Memoization (приклади Ruby та Ruby on Rails)?
📝 Автор/ка: memecode
20.02.2025 18:16
Дисклеймер

Інформація на сайті tseivo.com є суб'єктивною та відображає особисті погляди та досвід авторів та авторок блогів.

Використовуйте цей ресурс як одне з декількох джерел інформації під час своїх досліджень та прийняття рішень. Завжди застосовуйте критичне мислення. Людина сама несе відповідальність за свої рішення та дії.

Cховати