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

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

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

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

Контент

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

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

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

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

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

## До ES6: "callback hell"

До 2015 року основний спосіб працювати з асинхронним кодом виглядав приблизно так:

```javascript
getData(function (res) {
  process(res, function (result) {
    save(result, function (response) {
      console.log('Done!', response);
    });
  });
});
```

Читання і відладка такого коду - мука.
Помилки ловити складно, логіка - вкладена і нечитабельна.

---

## В ES6 з'явилася основа: **Promise**

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

Він описує "обіцянку" повернути результат, коли операція завершиться.

---

## Приклад Promise

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

promise.then(result => {
  console.log(result); // Дані отримано
});
```

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

- `new Promise()` створює обіцянку.
- Колбек отримує два аргументи:
  - `resolve()` -> операція завершена успішно
  - `reject()` -> сталася помилка
- Метод `.then()` - викликається при успішному результаті.
- Метод `.catch()` - ловить помилки.

---

## Приклад з помилками

```javascript
const promise = new Promise((resolve, reject) => {
  const success = false;
  if (success) resolve('OK');
  else reject('Помилка');
});

promise
  .then(res => console.log('Успішно:', res))
  .catch(err => console.log('Помилка:', err));
```

Promise робить обробку помилок **зручною і передбачуваною**.

---

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

Можна зв'язувати декілька `.then()` - результат одного передається наступному:

```javascript
fetch('/api/data')
  .then(res => res.json())
  .then(data => process(data))
  .then(result => save(result))
  .catch(error => console.error(error));
```

Код став **лінійним і читабельним**, на відміну від вкладених колбеків.

---

## Нові методи Promise (теж ES6)

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

---

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

```javascript
Promise.all([
  fetch('/user'),
  fetch('/posts'),
  fetch('/comments')
])
  .then(([userRes, postsRes, commentsRes]) => {
    console.log('Усі дані отримано!');
  })
  .catch(err => console.error('Помилка:', err));
```

> Якщо **хоча б один** проміс відхилиться -> `Promise.all()` видасть помилку.

---

## Що з'явилося пізніше (ES2017+)

Хоча ти запитав саме про **ES6**, важливо розуміти еволюцію:

| Версія | Нове для асинхронності |
|---|---|
| **ES6 (2015)** | Введено `Promise`, `.then()`, `.catch()`, `.all()`, `.race()` |
| **ES8 (2017)** | Додано `async/await` (синтаксичний цукор над промісами) |
| **ES2020+** | `Promise.allSettled()`, `Promise.any()`, `Promise.withResolvers()` |

Таким чином, ES6 став **фундаментом**,
а наступні версії тільки **покращили і спростили** роботу з ним.

---

## Чому це важливо

| До ES6 | Після ES6 |
|---|---|
| Колбеки, callback hell | Проміси, читабельна структура |
| Помилки ловляться вручну | `.catch()` для централізованої обробки |
| Багато вкладеностей | Ланцюжки `.then()` |
| Немає гарантій порядку виконання | Керована, передбачувана асинхронність |

---

## Коротко:

> **До ES6**: асинхронність через колбеки (хаос).
> **ES6**: введено **Promise** - спрощену, керовану модель асинхронності.
> **Пізніше (ES2017)**: додано `async/await`, які побудовані поверх промісів.

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

Для рев’юера

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

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