JavaScript async await — асинхронний код без колбеків

Синтаксис async/await дозволяє писати асинхронний код так, ніби він послідовний: await чекає на проміс, не блокуючи сторінку.

правити

Загальний опис

Це найбільше полегшення в історії асинхронного JavaScript. Ланцюжок із трьох .then() перетворюється на три звичайні рядки, які читаються згори вниз.

Функція, позначена async, завжди повертає проміс — навіть якщо в ній написано return 5. А await усередині неї призупиняє виконання тільки цієї функції, не заморожуючи браузер.

І головне: помилки ловляться звичайним try...catch, а не окремим .catch() — тобто так само, як у синхронному коді.

правити

Порада

Якщо кілька запитів не залежать один від одного — не чекай їх по черзі. await Promise.all([...]) виконає їх паралельно й заощадить час.

автор: NagarD правити

Нотатка

await працює лише всередині async-функції (або на верхньому рівні модуля). У звичайній функції це синтаксична помилка.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

async function fn() {
    const result = await promise;
}

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
async...await	55+	52+	11+	42+	15+	-

Підтримка: мобільні переглядачі

Переглядач
async...await	55+	yes	yes	11+

Приклади

+ запропонувати свій приклад у пісочниці

async function loadUser(id) {
    try {
        const response = await fetch(`/api/users/${id}`);

        if (!response.ok) {
            throw new Error(`Помилка ${response.status}`);
        }

        return await response.json();
    } catch (error) {
        console.error('Не вдалося завантажити:', error.message);
        return null;
    }
}

// паралельно, а не по черзі — удвічі швидше
async function loadBoth() {
    const [user, posts] = await Promise.all([
        loadUser(1),
        fetch('/api/posts').then(r => r.json()),
    ]);

    console.log(user, posts);
}