Краткое руководство по обещаниям в JavaScript

Promise в JavaScript - это объект, который возвращает результат после завершения асинхронной операции. Результатом обещания может быть успех или провал.

Обещание имеет 3 состояния.

В ожидании - обещание еще не получено.
Выполнено - Обещание выполнено.
Отклонено - обещание отклонено.

let promise = new Promise((resolve, reject) => {
    const number = Math.round(Math.random() * 10);
    if(number <= 5) {
        resolve('Success');
    } else {
        reject(new Error('Failed'));
    }
});

Чтобы создать Promise, мы используем конструктор Promise() с ключевым словом new. Promise() конструктор принимает функцию обратного вызова, называемую «executer», которая принимает два аргумента, то есть разрешить и отклонить.

Нам нужно вызывать функцию resolve(), когда функция-исполнитель получает результат, и вызывать функцию reject() при возникновении ошибки.

Теперь, чтобы использовать Promise, мы используем Promise методы, такие как then(), catch() и finally().

Promise.then ()

Метод then() может принимать две функции обратного вызова: первая выполняется при разрешении Promise, а вторая - при отклонении Promise.

function getPromise(isTrue) {
    return new Promise((resolve, reject) => {
        if(isTrue) {
            resolve('Success');
        } else {
            reject(new Error('Failed'));
        }
    });
}
getPromise(true).then(
    response => console.log('Promise is resolved with result = ' + response),
    error => console.log('Promise is rejected with error = ' + error.message)
);
// Promise is resolved with result = Success
getPromise(false).then(
    response => console.log('Promise is resolved with result = ' + response),
    error => console.log('Promise is rejected with error = ' + error.message)
);
// Promise is rejected with error = Failed

Если мы хотим обрабатывать случаи успеха и неудачи отдельно, мы можем использовать then() только для успеха и catch() для неудачи.

Promise.catch ()

Метод catch() принимает функцию обратного вызова, которая выполняется, когда Promise отклоняется.

function getPromise(isTrue) {
    return new Promise((resolve, reject) => {
        if(isTrue) {
            resolve('Success');
        } else {
            reject(new Error('Failed'));
        }
    });
}
getPromise(false)
.then(response => console.log('Promise is resolved with result = ' + response))
.catch(error => console.log('Promise is rejected with error = ' + error.message))
// Promise is rejected with error = Failed

Если мы обрабатываем ошибки как в then(), так и в catch(), то в случае любой ошибки выполняется только обработчик ошибок внутри then(), а не обработчик внутри catch().

let promise = new Promise((resolve, reject) => {
    reject(new Error('An error occurred'));
});
promise.then(null, () => console.log('Error caught inside then'))
.catch(() => console.log('Error caught inside catch'))
// Error caught inside then

Если в дальнейшем в обработчике ошибок then() произошла какая-либо ошибка, она будет обнаружена в catch().

let promise = new Promise((resolve, reject) => {
    reject(new Error('Error occurred in Promise'));
});
promise.then(null, 
    err => {
        console.log('Error caught inside then, message: ' + err.message);
        throw new Error('Error occured in then');
    })
.catch(err => {
    console.log('Error caught inside catch, message: ' + err.message);
});
// Error caught inside then, message: Error occurred in Promise
// Error caught inside catch, message: Error occured in then

Promise.finally ()

Метод finally() принимает функцию обратного вызова, которая выполняется после разрешения или отклонения Promise.

При успехе

let promise = new Promise((resolve, reject) => {
    resolve('Success');
});
promise.then(res => console.log(res))
.catch(err => console.log(err.message))
.finally(() => console.log('Executing Finally'));
// Success
// Executing Finally

При неудаче

let promise = new Promise((resolve, reject) => {
    reject(new Error('Failed'));
});
promise.then(res => console.log(res))
.catch(err => console.log(err.message))
.finally(() => console.log('Executing Finally'));
// Failed
// Executing Finally

Цепочка обещаний

Мы можем выполнить последовательность асинхронных операций одну за другой, объединив методы then(), catch() и finally().

takeOrder()
.then(order => makeOrder(order))
.then(order => serveOrder(order))
.then(status => console.log(status))
.catch(err => console.log(err));

Здесь takeOrder() вернет Promise, который будет использован в первом then() методе. makeOrder() вернет Promise, который будет использован вторым then() методом, а serveOrder() снова вернет Promise, который будет использован третьим then() методом. Если в каком-либо из обещаний возникла какая-либо ошибка, она будет обнаружена методом catch().

Promise.all ()

Метод Promise.all() принимает итерацию обещаний в качестве входных данных и возвращает одно Promise, и он разрешается, когда все обещания разрешаются или любое из них отклоняется.

function getPromise(delay) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(delay + 100);
        }, delay);
    })
}
Promise.all([getPromise(1000), getPromise(3000), getPromise(2000)])
.then(responses => console.log(responses))
.catch(error => console.log(error));

Promise.race ()

Метод Promise.race() принимает итерацию обещаний и возвращает одно Promise, которое разрешается / отклоняется, как только любое из обещаний разрешено или отклонено.

let promise1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Promise 1');
    }, 1000);
});
let promise2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Promise 2');
    }, 500);
});
Promise.race([promise1, promise2])
.then(res => console.log(res)) // Promise 2
.catch(err => console.log(err));

Вам также может понравиться

Больше контента на plainenglish.io