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

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

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

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

Контент

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

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

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

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

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

## Визначення

`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 |

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

Для рев’юера

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

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