Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке проміс?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Що таке **Promise**

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

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

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

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

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

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

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

1. `new Promise()` створює проміс.
2. Колбек усередині отримує два параметри:
  - `resolve(value)` → операція завершена успішно
  - `reject(error)` → сталася помилка
3. Метод `.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() | Виконати код у будь-якому разі |

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

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

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати639 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.