मुख्य कंटेंट तक स्किप करें

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

@serverSerrverlesskiy

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

math

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

promise states

  1. Pending - Промис ожидает, если результат не готов. То есть, ожидает завершение чего-либо (например, завершения асинхронной операции).
  2. Fulfilled - Промис решен, если результат доступен. То есть, что-то завершило свое выполнение(например, асинхронная операция) и все прошло успешно.
  3. 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))

Здесь аргументом внутри then() выступает массив, который содержит значения промисов в том же порядке, в котором они передавались в Promise.all().

EnglishMoji!

Проблемы?

Problem

Пишите в Discord или телеграмм чат, а также подписывайтесь на наши новости

Вопросы:

Question

Как называется метод который вызывается при успешном выполнении промиса?

  1. reject
  2. resolve

Каким методом можно проверить выполнение всех промисов в массиве?

  1. promise.all
  2. promise.race

Какой метод служит для отлова ошибок в промисах?

  1. then
  2. catch

Для того чтобы понять, на сколько вы усвоили этот урок, пройдите тест в мобильном приложении нашей школы по этой теме.

EnglishMoji!

Ссылки:

  1. MDN web docs
  2. Learn JavaScript
  3. Understanding Promises

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Philipp Dvinyaninov


Dmitriy Vasilev

💵

Resoner2005

🐛 🎨 🖋

Navernoss

🖋 🐛 🎨