Promise - отложенные и асинхронные вычисления

@serverSerrverlesskiy

Promise(Обещание) — это объект который содержит будущее значение асинхронной операции. Например, если вы запрашиваете некоторые данные с сервера, промис обещает нам получить эти данные, которые мы сможем использовать в будущем.

math

Вначале промис имеет статус pending ("ожидание"), затем – одно из: fulfilled ("выполнено успешно") или rejected ("выполнено с ошибкой").

promise states

Pending - Промис ожидает, если результат не готов. То есть, ожидает завершение чего-либо (например, завершения асинхронной операции).
Fulfilled - Промис решен, если результат доступен. То есть, что-то завершило свое выполнение(например, асинхронная операция) и все прошло успешно.
Rejected - Промиc отклонен, если произошла ошибка в процессе выполнения.

Видео

Создание промиса

Plus

Объект Promise создается при помощи ключевого🗝️ слова new и своего конструктора. Конструктор Промисов принимает один аргумент, обратный вызов, также известный как исполнительная функция⚙️, которая принимает 2 обратных вызова, resolve и reject.

Исполнительная функция⚙️ выполняется сразу же после создания промиса. Промис становится выполненным при помощи вызова resolve(), а отклоненным при помощи reject().

const promise = new Promise((resolve, reject) => {
  if (allWentWell) {
    resolve('Все прошло отлично!')
  } else {
    reject('Что-то пошло не так')
  }
})

resolve() и reject() принимают один аргумент, который может быть строкой, числом, логическим выражением, массивом или объектом.

Чтобы снабдить функцию⚙️ функционалом⚙️ обещаний, нужно просто вернуть в ней объект Promise:

function myAsyncFunction(url) {
  return new Promise((resolve, reject) => {
    //код функции
  })
}

Использование промиса

Help

Промисы используются при помощи методов then() и catch().

then

Метод then используется для запуска функций⚙️ при положительном и отрицательном результате промиса.

Launch

Синтаксис метода then:

promise.then(
  function (result) {
    /* обработает успешное выполнение */
  },
  function (error) {
    /* обработает ошибку */
  }
)

Первый 1️⃣ аргумент метода then – функция⚙️, которая выполняется, когда промис переходит в состояние "выполнен успешно", и получает результат.

Второй аргумент then – функция⚙️, которая выполняется, когда промис переходит в состояние "выполнен с ошибкой", и получает ошибку.

Error

Пример метода then:

let promise = new Promise(function (resolve, reject) {
  setTimeout(() => resolve('done!'), 1000)
})

// resolve запустит первую функцию, переданную в .then
promise.then(
  result => alert(result), // выведет "done!" через одну секунду
  error => alert(error) // не будет запущена
)

А в случае ошибки в промисе – выполнится вторая:

let promise = new Promise(function (resolve, reject) {
  setTimeout(() => reject(new Error('Whoops!')), 1000)
})

// reject запустит вторую функцию, переданную в .then
promise.then(
  result => alert(result), // не будет запущена
  error => alert(error) // выведет "Error: Whoops!" спустя одну секунду
)

Если нужно вывести только результат успешного выполения, то в then можно передать только одну функцию⚙️:

let promise = new Promise(resolve => {
  setTimeout(() => resolve('done!'), 1000)
})

promise.then(alert) // выведет "done!" спустя одну секунду

catch

Catch

Для отлова ошибок используется метод catch. Его можно использовать вместо метода then для вывода сообщений об ошибке.

Синтаксис метода catch:

let promise = new Promise((resolve, reject) => {
  setTimeout(() => reject(new Error('Ошибка!')), 1000)
})

promise.catch(alert) // выведет "Error: Ошибка!" спустя одну секунду

promise.all

Этот метод берет массив промисов и возвращает новый промис, который будет выполненным, когда все промисы внутри массива выполнены или отклонен, как только встречается промис, который отклоняется.

Return

Например:

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise1 выполнен')
  }, 2000)
})
const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise2 выполнен')
  }, 1500)
})
Promise.all([promise1, promise2])
  .then(data => console.log(data[0], data[1]))
  .catch(error => console.log(error))