TypeScript async/await Асинхронное программирование

async/await — это синтаксический сахар для асинхронного программирования, представленный в ES2017, благодаря которому асинхронный код выглядит как синхронный.

SVG-диаграмма: поток выполнения async/await Background Title async/await execution flow Left: Promise Promise approach fetchData() .then(result => { console.log(result); }) Arrow Right: async/await async/await approach async function main() { const result = await fetchData(); console.log(result); } Bottom: execution flow await execution order Timeline Main thread await Pause Promise Background execution Resume Resume Complete Complete Right-side explanation Advantage comparison ✓ Cleaner code ✓ Synchronous style ✓ Better error stack ✓ Easy to debug ✓ try/catch handling Arrow definition

На диаграмме выше показаны преимущества async/await перед традиционными Promises: более чистый код и более ясный поток выполнения.

Основы Promise

Promise представляет конечный результат асинхронной операции.

Пример

// Создать Promise
var promise = new Promise(function(resolve, reject) {
    var success = true;
    if (success) {
        resolve("Операция выполнена успешно");
    } else {
        reject("Операция не удалась");
    }
});

promise.then(function(result) {
    console.log("Успех: " + result);
})["catch"](function(error) {
    console.log("Ошибка: " + error);
});

Результат выполнения:

Success: Operation successful

async функции

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

Пример

// асинхронные функции автоматически возвращают Promise
async function greet(): Promise<string> {
    return "Hello, World!";
}

greet().then(function(result) {
    console.log("Результат: " + result);
});

// Асинхронная функция возвращает Promise
async function getData() {
    return { name: "Alice", age: 25 };
}

getData().then(function(data) {
    console.log("Данные: " + JSON.stringify(data));
});

Результат выполнения:

结果: Hello, World!
数据: {"name":"Alice","age":25}

Ключевое слово await

await ожидает завершения Promise и получает результат.

Пример

// Имитация асинхронной операции
function delay(ms: number): Promise<string> {
    return new Promise(function(resolve) {
        setTimeout(function() {
            resolve("Готово!");
        }, ms);
    });
}

async function main() {
    console.log("Начало...");
    var result = await delay(100);
    console.log("Результат: " + result);
    console.log("Конец");
}

main();

Результат выполнения:

Start...
Result: Complete!
End

Обработка ошибок

Используйте try/catch для обработки асинхронных ошибок.

Пример

function mayFail(shouldFail: boolean): Promise<string> {
    return new Promise(function(resolve, reject) {
        if (shouldFail) {
            reject(new Error("Операция не удалась"));
        } else {
            resolve("Операция выполнена успешно");
        }
    });
}

async function handleError() {
    try {
        var result = await mayFail(true);
        console.log("Результат: " + result);
    } catch (error) {
        console.log("Перехвачена ошибка: " + error.message);
    }
}

handleError();

Результат выполнения:

Error caught: Operation failed

Параллельное выполнение

Используйте Promise.all для параллельного выполнения нескольких асинхронных операций.

Пример

function fetchUser(id: number): Promise<{ id: number; name: string }> {
    return Promise.resolve({ id: id, name: "User" + id });
}

async function main() {
    // Выполнить последовательно
    console.time("Serial");
    var user1 = await fetchUser(1);
    var user2 = await fetchUser(2);
    console.log("Последовательное выполнение завершено: " + user1.name + ", " + user2.name);
    console.timeEnd("Serial");

    // Выполнить параллельно
    console.time("Parallel");
    var results = await Promise.all([fetchUser(1), fetchUser(2)]);
    console.log("Параллельное выполнение завершено: " + results[0].name + ", " + results[1].name);
    console.timeEnd("Parallel");
}

main();

Результат выполнения:

串行完成: User1, User2
并行完成: User1, User2

Преимущества async/await по сравнению с Promise

  • Более чистый и читаемый код
  • Синхронный стиль кода
  • Улучшенный стек ошибок
  • Легко отлаживать

Итог

  • async：Объявление async-функций
  • await：Ожидание Promise
  • Обработка ошибок:try/catch
  • Параллельно:Promise.all
Другие расширения