Структура Promise (JavaScript) та як з цим працювати

18.02.2025 14:33

~ 3 хв. читання

Партнерський матеріал

Обкладинка нотатки: Структура Promise (JavaScript) та як з цим працювати

Зміст дописунатисність на посилання, щоб перейти до потрібного місця

Як виглядає структура Promise Робота з Promise Ланцюжки Promise Promise.all, Promise.race та Promise.any

Promise — це об’єкт, який представляє результат асинхронної операції. Вони дають змогу працювати з відкладеними результатами без вкладених колбеків, що робить код більш читабельним. Раніше я вже робив маленький допис про те що таке Promise. Але зараз розглянемо структуру і деякі методи.

Як виглядає структура Promise

Promise створюється за допомогою конструктора new Promise(), якому передається функція з двома аргументами: resolve та reject. Ось саме цю структуру і треба запам'ятати. Розглянемо приклад:

const promise = new Promise((resolve, reject) => {
  const success = Math.random() > 0.5;
  
  setTimeout(() => {
    if (success) {
      resolve("Операція виконана успішно");
    } else {
      reject("Сталася помилка");
    }
  }, 1000);
});

Цей код створює проміс, який після секунди (таймаут 1000) або вирішується (resolve) зі строкою "Операція виконана успішно", або відхиляється (reject) з повідомленням про помилку. Тобто ми створили емітацію відповіді success, почекали секунду і отримали результат який залежав від нашого рандомного значення у success.

Робота з Promise

Promise має методи .then(), .catch() та .finally() для обробки результату.

promise
  .then(result => {
    console.log("Успіх:", result);
  })
  .catch(error => {
    console.log("Помилка:", error);
  })
  .finally(() => {
    console.log("Операція завершена");
  });

Тут .then() отримує значення з resolve, .catch() обробляє помилку з reject, а .finally() виконується завжди, незалежно від результату. Ці методи також варто запам'ятати.

Ланцюжки Promise

Метод .then() повертає новий Promise, що дозволяє послідовне (ланцюжкове) виконання.

new Promise(resolve => resolve(10))
  .then(num => num * 2)
  .then(num => num + 5)
  .then(result => console.log("Результат:", result));

Тут початкове значення 10 множиться на 2, додається 5, і в результаті виводиться 25.

Promise.all, Promise.race та Promise.any

Метод Promise.all() чекає на виконання всіх переданих промісів.

Promise.all([
  new Promise(resolve => setTimeout(() => resolve("Перше"), 1000)),
  new Promise(resolve => setTimeout(() => resolve("Друге"), 2000))
]).then(results => console.log("Усі виконані:", results));

А Promise.race() повертає перший виконаний проміс. Цей метод легко запам'ятати за назвою race - хто перший, той і переміг.

Promise.race([
  new Promise(resolve => setTimeout(() => resolve("Перше"), 1000)),
  new Promise(resolve => setTimeout(() => resolve("Друге"), 500))
]).then(result => console.log("Перше виконане:", result));

Promise.any() — це метод, який приймає масив промісів і повертає перший успішно виконаний проміс. Якщо всі проміси відхиляються, він повертає помилку AggregateError.

const p1 = new Promise((_, reject) => setTimeout(() => reject("Помилка 1"), 1000));
const p2 = new Promise(resolve => setTimeout(() => resolve("Успіх 2"), 2000));
const p3 = new Promise(resolve => setTimeout(() => resolve("Успіх 3"), 3000));

Promise.any([p1, p2, p3])
  .then(result => console.log("Перший успішний результат:", result))
  .catch(error => console.log("Усі проміси відхилені:", error));

Що відбувається у прикладі:

p1 відхиляється через 1 секунду.
p2 виконується успішно через 2 секунди.
Promise.any() повертає p2, оскільки він був першим успішним.
Якщо всі проміси відхиляться, повернеться AggregateError, що міститиме всі помилки.

Цей метод корисний, коли потрібно отримати перший вдалий результат, ігноруючи невдалі