Что такое async/await и как оно работает под капотом (через Promise)?

1️⃣ Как кратко ответить

Async/await — это синтаксический сахар в JavaScript для работы с асинхронными операциями, который упрощает написание и чтение кода. async обозначает функцию как асинхронную и автоматически возвращает Promise. await приостанавливает выполнение функции до завершения Promise, возвращая его результат. Под капотом async/await работает через Promises, где await ожидает разрешения или отклонения Promise.

2️⃣ Подробное объяснение темы

Async/await — это современный способ работы с асинхронным кодом в JavaScript, который делает его более похожим на синхронный. Это упрощает понимание и поддержку кода, особенно когда нужно выполнять несколько асинхронных операций последовательно.

Зачем это нужно

Асинхронные операции, такие как запросы к серверу или чтение файлов, могут занимать неопределенное время. Чтобы не блокировать выполнение программы, JavaScript использует асинхронные вызовы. Ранее для этого использовались коллбэки и Promises, но они могли усложнять код, особенно при наличии вложенных вызовов. Async/await решает эту проблему, делая код более линейным и читаемым.

Как это работает

Async

Ключевое слово async перед функцией указывает, что эта функция является асинхронной и автоматически возвращает Promise. Если функция возвращает значение, оно оборачивается в Promise, который разрешается с этим значением.

async function fetchData() {
    return "Data received";
}
​
// Вызов функции
fetchData().then(data => console.log(data)); // Выведет: Data received

• async function fetchData() — объявление асинхронной функции.
• return "Data received"; — возвращаемое значение автоматически оборачивается в Promise.

Await

Ключевое слово await используется внутри асинхронной функции для ожидания завершения Promise. Оно приостанавливает выполнение функции до тех пор, пока Promise не будет разрешен или отклонен.

async function getData() {
    const data = await fetch('https://api.example.com/data');
    return data.json();
}
​
// Вызов функции
getData().then(data => console.log(data));

• await fetch('https://api.example.com/data'); — приостанавливает выполнение до завершения запроса.
• return data.json(); — возвращает результат обработки данных.

Как это работает под капотом

Под капотом async/await работает через Promises. Когда функция, помеченная как async, вызывается, она возвращает Promise. Если внутри функции используется await, выполнение функции приостанавливается до тех пор, пока Promise не будет разрешен. Это позволяет писать асинхронный код, который выглядит и ведет себя как синхронный.

async function example() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error:', error);
    }
}
​
example();

• const response = await fetch('https://api.example.com/data'); — выполнение приостанавливается до завершения HTTP-запроса.
• const data = await response.json(); — выполнение приостанавливается до завершения обработки JSON.
• try...catch — используется для обработки ошибок, которые могут возникнуть при выполнении асинхронных операций.

Async/await делает код более линейным и понятным, скрывая сложность работы с Promises, но при этом полностью на них полагается.