Promise: основи

Об'єкт, що представляє результат асинхронної операції в майбутньому — стани, then/catch/finally та проблема callback hell.

Проблема, яку розв'язує Promise: callback hell

До Promise асинхронні операції, що залежали одна від одної, записувались вкладеними колбеками (модуль «Функції») — кожен наступний крок опинявся на рівень глибше за попередній:

javascript

getUser(userId, (user) => {
  getOrders(user.id, (orders) => {
    getOrderDetails(orders[0].id, (details) => {
      console.log(details); // логіка ховається у вкладеності, а не в послідовності дій
    });
  });
});

javascript

wait(1000)
  .then(() => console.log("Минула секунда"))
  .catch((error) => console.error("Щось пішло не так:", error))
  .finally(() => console.log("Виконано незалежно від результату"));

javascript

function fetchUserData(userId) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (userId <= 0) {
        reject(new Error("Некоректний userId"));
        return;
      }
      resolve({ id: userId, name: "Олена" });
    }, 500);
  });
}

fetchUserData(1)
  .then((user) => console.log(user)) // { id: 1, name: "Олена" }
  .catch((error) => console.error(error.message));

Promise: основи

Проблема, яку розв'язує Promise: callback hell

Три стани Promise

Створення Promise

then, catch, finally

Практичний приклад: обгортання таймера

Поширені помилки

Підсумок