Що нового приніс ES6 для асинхронності?

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

До 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, які побудовані поверх промісів.

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

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

Premium

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