Шпаргалка по промисам JavaScript и async/await
Шпаргалка описывает основные принципы промисов (promises) JavaScript и синтаксис async/await.
Промисы
Объект Promise представляет собой окончательное завершение (или неудачу) асинхронной операции и её результирующее значение. У промиса есть три состояния:
- В ожидании (Pending): исходное состояние, не выполнено и не отклонено.
- Выполнено (Fulfilled): операция успешно завершена.
- Отклонено (Rejected): операция не удалась
Promise
Создаёт новый объект Promise. Конструктор в основном используется для функции обертывания, которые еще не поддерживают промисы.
new Promise((resolve, reject) => {
setTimeout(() => resolve(), 2000);
});
Promise.prototype.then()
Метод .then()
объекта JavaScript Promise можно использовать для получения конечного результата асинхронной операции.
asyncOperation().then(result => console.log(result));
Promise.prototype.catch()
Информация об отказе промиса доступна обработчику, поставляемого в методе .catch()
.
asyncOperation().catch(err => console.log(err));
Promise.prototype.finally()
Обработчик вызывается, когда промис выполнен, независимо от того, выполнено оно или отклонено.
asyncOperation().finally(() => console.log('async operation ended!'));
Promise.resolve()
Возвращает промис, которое разрешается до присвоенного ему значения.
Promise.resolve(15).then(console.log);
Promise.reject()
Возвращает промис, которое отклоняется с выданной ему ошибкой.
Promise
.reject(new Error('This is an error!'))
.catch(console.log);
Promise.all([… promises])
Подождать, пока все промисы будут выполнены или любые будут отклонены.
Promise
.all([promise1, promise2])
.then(([val1, val2]) => console.log(val1, val2));
Promise.allSettled([… promises])
Подождать, пока все промисы урегулируются (каждое может выполнить или отклонить).
Promise
.allSettled([promise1, promise2])
.then(results => {
results.forEach(result => console.log(result.status));
});
Promise.any([… promises])
Принимает итерируемый объект Promise, и как только одно из промисов в итеративном исполнении выполняется, возвращает один промис, которое разрешается со значением из этого промиса.
Promise
.any([promise1, promise2])
.then(value => console.log(value));
Promise.race([… promises])
Подождать, пока любой из промисов не будет выполнен или отклонён. Отличие
от .any
в том, что внешний промис может быть отклонен, если отклонено
внутренний промис.
Promise
.race([promise1, promise2])
.then(value => console.log(value));
ASYNC / AWAIT
Синтаксис async…await
в ES6 предлагает новый способ написания более читаемого
и масштабируемого кода для обработки промисов.
Asynс функция
Асинхронная (Asynс) функция - это функция, объявленная с ключевым словом async, и в неё разрешено ключевое слово await. Вызов асинхронной функции всегда приводит к промису.
async function asyncOperation(...params) {
// код функции
}
Оператор возврата асинхронных функций
(async () => value)()
Возврат значения из асинхронной функции всегда будет соответствовать этому значению.
const getName = async () => "Привет Мир";
getName().then(console.log); // выведет: Привет Мир
(async () => throw err)()
Выдача ошибки из асинхронной функции всегда отклоняет эту ошибку.
const throwError = async () => throw Error("Ошибка...");
throwError().reject(console.error);
Ключевое слово Await
Вы можете дождаться промиса, используя ключевое слово await.
(async () => {
const data = await asyncOperation();
console.log(data);
})();
Примечание. await верхнего уровня пока не поддерживается. Вы можете использовать ключевое слово await только внутри асинхронной функции.
Async/Await обработка ошибок
Вы можете использовать блоки try / catch
для перехвата отказов от асинхронной функции (имейте
в виду, что есть также API-интерфейс promises, доступный для перехвата ошибок).
const main = async () => {
try {
const value = await asyncOperation();
console.log(value);
} catch (err) {
console.log(err);
}
};
main();