Шпаргалка по промисам JavaScript и async/await

| JavaScript

Шпаргалка описывает основные принципы промисов (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();