Що таке проміс?

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

Що таке Promise

Promise - це спеціальний об'єкт, який являє собою результат асинхронної операції:

або успішний результат,

або помилку, яка може статись у майбутньому.

Іншими словами:

Проміс - це "обіцянка" JavaScript, що "я пізніше поверну тобі результат".

Приклад простого проміса

javascript

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Дані отримано');
  }, 1000);
});

promise.then(result => {
  console.log(result); // 'Дані отримано' (через 1 сек)
});

Що відбувається:

new Promise() створює проміс.
Колбек усередині отримує два параметри:

resolve(value) → операція завершена успішно
reject(error) → сталася помилка

Метод .then() спрацює, коли проміс виконається (fulfilled).

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

Кожен Promise може перебувати в одному з трьох станів:

Стан	Опис
pending (очікування)	Проміс ще виконується
fulfilled (виконано)	Операція успішно завершена, викликано `resolve()`
rejected (відхилено)	Сталася помилка, викликано `reject()`

Після переходу в один з кінцевих станів (fulfilled/rejected) проміс більше не змінюється.

Приклад з `resolve` і `reject`

javascript

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

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

promise
  .then(result => console.log(result))   // якщо все добре
  .catch(error => console.error(error)) // якщо помилка
  .finally(() => console.log('Завершено'));

.then() - викликається при успіху .catch() - при помилці .finally() - викликається завжди, незалежно від результату

Проміси - спосіб "розпрямити" асинхронний код

Раніше (колбеки):

javascript

getUser(id, function (user) {
  getPosts(user.id, function (posts) {
    getComments(posts[0].id, function (comments) {
      console.log(comments);
    });
  });
});

З промісами:

javascript

getUser(id)
  .then(user => getPosts(user.id))
  .then(posts => getComments(posts[0].id))
  .then(comments => console.log(comments))
  .catch(err => console.error(err));

Тепер код читається лінійно - зверху вниз.

Приклад: перетворюємо асинхронний код на проміс

javascript

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

delay(2000).then(() => console.log('Минуло 2 секунди'));

Методи Promise API

Метод	Що робить
`Promise.resolve(value)`	Створює успішно виконаний проміс
`Promise.reject(error)`	Створює відхилений проміс
`Promise.all([p1, p2])`	Чекає виконання всіх промісів
`Promise.race([p1, p2])`	Повертає результат першого завершеного проміса
`Promise.allSettled([p1, p2])`	Чекає всіх промісів, навіть якщо є помилки
`Promise.any([p1, p2])`	Повертає перший успішний проміс

Приклад `Promise.all`

javascript

const p1 = Promise.resolve('A');
const p2 = Promise.resolve('B');
const p3 = Promise.resolve('C');

Promise.all([p1, p2, p3]).then(values => {
  console.log(values); // ['A', 'B', 'C']
});

Приклад `Promise.race`

javascript

const slow = new Promise(resolve => setTimeout(() => resolve('slow'), 2000));
const fast = new Promise(resolve => setTimeout(() => resolve('fast'), 1000));

Promise.race([slow, fast]).then(result => console.log(result));
// fast

Проміси - фундамент для `async/await`

Пізніше (в ES2017) з'явилась надбудова - синтаксис async/await, яка робить код ще простішим:

javascript

const getData = () => new Promise(resolve => setTimeout(() => resolve('OK'), 1000));

async function main() {
  const res = await getData();
  console.log(res);
}
main(); // OK

await - просто "синтаксичний цукор" над .then()

Ключові особливості

Особливість	Опис
Асинхронний за своєю природою	Обробляється через чергу мікрозадач (microtask queue)
Одноразове розв'язання	Проміс можна "резолвити" лише один раз
Не блокує потік	JS продовжує виконувати решту коду
Підтримує ланцюжки	Можна пов'язувати `.then()` і `.catch()`

Підсумок

Що таке	Простими словами
Promise	"Обіцянка", що асинхронна операція поверне результат пізніше
Стани	pending → fulfilled / rejected
then()	Виконати код при успіху
catch()	Виконати код при помилці
finally()	Виконати код у будь-якому разі

Простіше кажучи:

Проміс - це контейнер для результату операції, яка завершиться в майбутньому. Він спрощує асинхронний код, роблячи його лінійним, зрозумілим і передбачуваним.

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

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

Premium

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