async/await

async/await - это синтаксический сахар для промисов, позволяющий писать их в привычном синхронном стиле.

Ключевое слово async позволяет сделать из обычной функции асинхронную.

Такая функция делает две вещи:

  • Оборачивает возвращаемое значение в Promise

  • Позволяет использовать ключевое слово await

По сути она делает следующее:

// обычная функция
function hello() {
    return 'Hello'
}

// асинхронная функция
async function hello() {
    return 'Hello'
}

// эквивалентно
function hello() {
    return new Promise((resolve, reject) => {
        try {
            // здесь может быть более сложный код, который может вернуть значение
            // или выбросить ошибку
            resolve('Hello')
        } catch (error) {
            reject(error)
        }
    })
}

Асинхронные функции становятся мощным инструментом при использовании ключевого слова await. await работает только в асинхронных функциях.

Мы можем использовать await перед promise-based функцией, чтобы остановить поток выполнения и дождаться результата её выполнения (результат Promise).

await можно использовать с любыми функциями, которые возвращают промис.

Пример:

Для обработки ошибок в async/await используется обычный try/catch.

Подводные камни

Если написать несколько async/await подряд в случак, когда они независимы, то один промис будет дожидаться выполнения другого. Пример:

Можно вынести их в переменные или использовать Promise.all:

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

Подробнее: Недостатки async/await (MDN).

Last updated