Перейти до основного вмісту
Модуль 7 · Урок 1 із 425/32 у курсі~12 min
Модульні уроки (1/4)

Обіцянки: які вони

Обіцянка — це значення, яке представляє результат операції, яка завершиться в майбутньому. Він може перебувати в одному з трьох станів:

  • очікує — операція ще триває
  • виконано — завершено успішно, є значення
  • відхилено — не вдалося, є помилка

Коли він виходить із стану очікування, він "вирішується" назавжди.

Створення дозволеного Promise

Два найпоширеніші способи — ви майже ніколи не створите Promise «вручну» за допомогою конструктора:

JS
const p1 = Promise.resolve(42);
const p2 = Promise.reject(new Error('oops'));

Читання результату: .then / .catch

JS
Promise.resolve(10).then((v) => {
  console.log(v); // 10
});

Promise.reject(new Error('no')).catch((e) => {
  console.log(e.message); // 'no'
});

.then отримує функцію, яка викликається з вирішеним значенням. .catch отримує функцію, викликану з помилкою у разі відхилення.

Зв'язування

Кожен .then у свою чергу повертає Promise: ви можете зв’язати їх, щоб перетворити значення крок за кроком.

JS
Promise.resolve(5)
  .then((n) => n * 2)
  .then((n) => n + 1)
  .then((n) => console.log(n)); // 11

Якщо будь-який із кидків .then (або повертає Promise, що не вдається), виконання переходить до першого наступного .catch.

Конструктор (рідко)

JS
const p = new Promise((resolve, reject) => {
  if (Math.random() > 0.5) resolve('ok');
  else reject(new Error('no'));
});

Ви використовуватимете його лише тоді, коли вам потрібно «обіцяти» щось, що використовує зворотні виклики (наприклад, старі DOM API або setTimeout).

Спробуйте

вправи#js.m7.l1.e1
Спроби: 0Завантаження…

Визначте `promisedVersion(n)`, який, отримавши число, повертає Promise, розв’язане з подвійним значенням n.

Завантаження редактора…
Показати підказку

повернути Promise.resolve(n * 2)

Рішення доступне після 3 спроб

Повторна вправа

вправи#js.m7.l1.e2
Спроби: 0Завантаження…

Визначте `incrementThree(p)`, який отримує обіцянку числа та повертає обіцянку числа + 3. Використовуйте ланцюжок .then.

Завантаження редактора…
Показати підказку

p.then((n) => n + 3)

Рішення доступне після 3 спроб