JavaScript Promise — обіцянка, асинхронний результат

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

правити

Загальний опис

Уяви, що замовляєш каву. Ти не стоїш біля стійки, заціпенівши: тобі дають талончик. Каву ще не зварено, але в тебе на руках обіцянка, що її або принесуть, або скажуть, що зерна закінчились.

Саме це й є Promise. Він завжди в одному з трьох станів:

• pending — очікує, результату ще немає;
• fulfilled — виконано, є значення;
• rejected — відхилено, є помилка.

Перехід відбувається один раз і назавжди: обіцянка, що вже виконалась, не може передумати.

Це те, що замінило пекло колбеків. Замість вкладених один в одного обробників — плаский ланцюжок .then(), а помилка з будь-якої ланки долітає до одного .catch() у кінці.

У сучасному коді проміси майже завжди споживають через async/await — це той самий проміс, лише записаний як послідовний код.

правити

Порада

Незалежні запити не чекай по черзі. Promise.all([a, b, c]) запустить їх одночасно й дочекається всіх — час виконання дорівнюватиме найповільнішому, а не сумі.

автор: NagarD правити

Нотатка

Функція всередині new Promise() виконується негайно, а не тоді, коли ти викличеш .then(). Проміс не «запускає» операцію — він лише повідомляє про її кінець.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

const promise = new Promise((resolve, reject) => { ... });

методи

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
Promise	32+	29+	8+	19+	12+	-

Підтримка: мобільні переглядачі

Переглядач
Promise	32+	yes	yes	8+

Приклади

+ запропонувати свій приклад у пісочниці

(async () => {
    // власна обіцянка: затримка
    const wait = ms => new Promise(resolve => setTimeout(resolve, ms));

    wait(1000).then(() => console.log('Минула секунда'));

    // ланцюжок: помилка з будь-якої ланки долетить до catch
    fetch('/api/user')
        .then(response => response.json())
        .then(user => console.log(user.name))
        .catch(error => console.error('Не вдалося:', error.message))
        .finally(() => console.log('Запит завершено'));

    // паралельно, а не по черзі
    try {
        const [user, posts] = await Promise.all([
            fetch('/api/user').then(r => r.json()),
            fetch('/api/posts').then(r => r.json()),
        ]);
        console.log(user, posts);
    } catch (error) {
        console.error('Один із запитів упав:', error.message);
    }
})();