Що таке Promise?

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

Визначення

Promise (проміс) - це спеціальний об'єкт у JavaScript, який представляє результат асинхронної операції, що може завершитися пізніше - успішно або з помилкою.

Простіше кажучи, Promise - це "обіцянка" дати результат у майбутньому. Зараз відповіді немає, але вона буде, коли операція завершиться.

Три стани проміса

Стан	Опис	Приклад
pending	"очікування" - операція ще не завершена	запит у процесі
fulfilled	"виконано успішно" - є результат	дані отримано
rejected	"відхилено" - сталася помилка	сервер повернув 404

Приклад 1 - Створення проміса вручну

javascript

const promise = new Promise((resolve, reject) => {
  const success = Math.random() > 0.5;

  if (success) {
    resolve('Успіх!');
  } else {
    reject('Помилка!');
  }
});

resolve(value) - переводить проміс у стан fulfilled;
reject(error) - переводить у стан rejected.

Обробка результату

javascript

promise
  .then((result) => {
    console.log('Результат:', result);
  })
  .catch((error) => {
    console.error('Помилка:', error);
  })
  .finally(() => {
    console.log('Завжди виконується');
  });

Що робить кожен метод:

Метод	Коли викликається	Що повертає
`.then()`	при успішному виконанні (`resolve`)	новий Promise
`.catch()`	при помилці (`reject`)	новий Promise
`.finally()`	у будь-якому разі (успіх чи помилка)	новий Promise

Приклад 2 - Асинхронний код з Promise

javascript

function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Дані отримано!');
    }, 2000);
  });
}

fetchData().then((data) => console.log(data));

fetchData() повертає Promise -> через 2 секунди він резолвиться, і then() отримує результат.

Приклад 3 - Обробка помилок

javascript

function fetchUser() {
  return new Promise((_, reject) => {
    setTimeout(() => reject('Користувача не знайдено'), 1000);
  });
}

fetchUser()
  .then(user => console.log(user))
  .catch(err => console.error(err));

Вивід:

javascript

Користувача не знайдено

Ланцюжки промісів (Promise chaining)

Кожен .then() повертає новий Promise, тому можна створювати ланцюжки асинхронних дій:

javascript

getUser()
  .then(user => getPosts(user.id))
  .then(posts => getComments(posts[0].id))
  .then(comments => console.log(comments))
  .catch(err => console.error('Помилка:', err));

Перевага: Немає вкладеності -> читається згори вниз (на відміну від callback hell).

Скорочена форма - Promise.resolve() і Promise.reject()

javascript

Promise.resolve('OK').then(console.log);   // "OK"
Promise.reject('Помилка').catch(console.error); // "Помилка"

Паралельні проміси

Promise.all() - чекає, поки виконаються всі

javascript

Promise.all([
  fetch('/user'),
  fetch('/posts'),
]).then(([userRes, postRes]) => {
  console.log('Обидві відповіді отримано');
});

Якщо хоча б один проміс завершиться з помилкою -> весь all() буде rejected.

Promise.allSettled() - чекає всі, незалежно від помилок

javascript

Promise.allSettled([
  fetch('/user'),
  fetch('/wrong-url'),
]).then(console.log);

Результат:

javascript

[
  { status: "fulfilled", value: Response },
  { status: "rejected", reason: TypeError }
]

Promise.race() - повертає перший, що завершився

javascript

Promise.race([
  fetch('/slow'),
  fetch('/fast'),
]).then(console.log);

Проміси та async/await

Проміси - це основа, на якій побудований синтаксис async/await:

javascript

async function main() {
  try {
    const user = await getUser();
    const posts = await getPosts(user.id);
    console.log(posts);
  } catch (err) {
    console.error(err);
  }
}

Тут await просто чекає Promise, але робить код лінійним і зрозумілим.

Проста аналогія

Проміс - як доставка піци.

Ви робите замовлення -> проміс створюється (pending)

Кур'єр везе замовлення -> операція виконується

Кур'єр приїжджає -> проміс resolve

Кур'єр губиться -> проміс reject

Ви можете "підписатися" на результат (then) і "обробити" помилки (catch).

ПІДСУМОК

Термін	Опис
Promise	Об'єкт, що представляє майбутній результат асинхронної операції
Стани	`pending` -> `fulfilled` або `rejected`
Методи	`.then()`, `.catch()`, `.finally()`
Головна перевага	Спрощує роботу з асинхронністю, позбавляє від callback hell
Сучасний синтаксис	`async/await` побудований на Promise

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.