Що таке Promise?

Promise — це заповнювач для майбутнього значення, яким може бути:

Promise починається у стані pending і остаточно переходить у стан fulfilled із значенням або rejected із причиною.

Розуміння методів resolve, reject та then()

Створення Promise

Щоб створити Promise, необхідно передати функцію з двома параметрами: resolve та reject. Ці параметри є функціями, які використовуються для позначення того, чи була асинхронна операція виконана успішно, чи завершилася з помилкою.

const myPromise = new Promise((resolve, reject) => {
  const success = true; // Simulate whether the task is successful

  if (success) {
    resolve('Task completed successfully!');
  } else {
    reject('Task failed.');
  }
});

• resolve(value): Позначає Promise як виконаний (успішний) та передає результат (value);
• reject(error): Позначає Promise як відхилений (з помилкою) та передає помилку.

Використання then() для обробки виконаних Promise:

Після створення Promise результат можна обробити за допомогою методу then(). Цей метод викликається, коли Promise виконується (вирішується).

myPromise.then(result => {
  console.log(result); // Output: Task completed successfully!
});

У цьому прикладі метод then() отримує значення, передане у resolve(), і виконує зворотний виклик із результатом. Він виконується лише у випадку успішного виконання Promise.

Обробка помилок за допомогою .catch()

Promises надають простий спосіб обробки помилок через метод .catch(). Якщо Promise відхиляється (зазнає невдачі), помилка перехоплюється та обробляється всередині .catch().

Метод catch() використовується для обробки помилок, коли Promise відхиляється. Він перехоплює помилку, передану через reject(), і дозволяє керувати сценаріями невдачі.

Ланцюжки Promise для послідовних асинхронних операцій

Однією з ключових переваг Promise є можливість об'єднувати їх у ланцюжки, що дозволяє виконувати кілька асинхронних операцій послідовно без виникнення callback hell. Кожен then() повертає новий Promise, що дає змогу ланцюжити кілька викликів then() у послідовності, з відображенням результатів у HTML після виконання кожного Promise.

Послідовні операції: Кожен then() повертає новий Promise, передаючи результат з однієї операції до наступної. Це дозволяє створити чисту, лінійну послідовність асинхронних операцій, яка оновлює відображуваний текст у HTML.

Обробка помилок: Метод .catch() обробляє будь-яку помилку, що виникає під час виконання будь-якого з Promise. Це гарантує, що помилки будуть перехоплені та відображені на сторінці незалежно від того, де вони виникли у ланцюжку.

Чому використовувати Promises?

1. Уникнення callback hell: Promises пропонують чистіший і більш читабельний спосіб обробки асинхронних операцій, ніж глибоко вкладені колбеки;
2. Обробка помилок: Promises забезпечують вбудовану обробку помилок за допомогою .catch(), що спрощує обробку відхилених операцій;
3. Послідовне ланцюжкування: Promises дозволяють виконувати кілька асинхронних операцій послідовно за допомогою ланцюжкування, що робить код легшим для розуміння та підтримки.