async/await в JavaScript

Асинхронные операции — одна из ключевых особенностей JavaScript. Работа с ними стала намного проще благодаря async/await, которые позволяют писать асинхронный код так, будто он синхронный. Давайте разберемся, как это работает, и посмотрим на примеры

1. Что такое async и await?

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

2. Пример использования async/await

Вместо того чтобы работать с цепочками .then(), можно использовать более читаемую структуру:

async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Ошибка при получении данных:', error);
    }
}

fetchData();

Здесь:

• Мы определяем асинхронную функцию fetchData, которая выполняет запрос к API.
• await заставляет выполнение кода ждать ответа от fetch(), а затем ожидать преобразования ответа в формат JSON.
• try/catch блок используется для обработки ошибок, чтобы избежать непредвиденных сбоев.

3. Последовательные и параллельные запросы

С помощью async/await можно управлять асинхронными операциями как последовательно, так и параллельно.

• Последовательные запросы:

async function getUserAndPosts() {
    const user = await fetch('/api/user');
    const posts = await fetch('/api/posts');
    console.log(user, posts);
}

Здесь один запрос выполняется после завершения другого, что не всегда эффективно.

• Параллельные запросы:

Чтобы сделать запросы параллельно, используйте Promise.all():

async function getUserAndPosts() {
    const [user, posts] = await Promise.all([
        fetch('/api/user'),
        fetch('/api/posts')
    ]);
    console.log(user, posts);
}

Это позволяет выполнять запросы одновременно, что ускоряет выполнение программы.

4. Когда использовать async/await?

Используйте async/await, когда:

• Вам нужно упростить работу с промисами и сделать код более читабельным.
• Важно обработать ошибки с помощью try/catch.
• Требуется выполнить несколько асинхронных операций последовательно или параллельно.

Заключение

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