How can you implement async/await in TypeScript?

在 TypeScript 中实现 async / await 和在 JavaScript 中几乎是一样的，因为 TypeScript 是 JavaScript 的超集，它们都支持现代 JavaScript 的特性，包括 ES2017 中引入的 async / await 语法。async / await 让异步代码的书写和阅读更加容易，使得异步代码看起来更像是同步代码。

使用 async / await 的基本语法

1. async 函数：你可以将任何函数声明为异步函数，方法是在函数声明前加上 async 关键字。这使得函数自动返回一个 Promise。

2. await 表达式：在 async 函数内部，你可以使用 await 关键字来等待一个 Promise 解决 (resolve)。这会暂停 async 函数的执行，直到 Promise 完成，并返回结果。

示例

假设我们有一个用来模拟数据获取的异步函数，返回一个 Promise：

typescript
function fetchUserData(userId: string): Promise<any> {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve({id: userId, name: "John Doe", email: "john@example.com"});
        }, 1000);
    });
}

现在，我们使用 async / await 来调用这个函数：

typescript
async function displayUser() {
    try {
        const userData = await fetchUserData("u123");
        console.log(`User Name: ${userData.name}`);
        console.log(`Email: ${userData.email}`);
    } catch (error) {
        console.error("Error fetching user data:", error);
    }
}

displayUser();

说明

• displayUser 函数：这是一个 async 函数，它等待 fetchUserData 的结果。await 只能在 async 函数内部使用。

• 错误处理：我使用了 try/catch 来处理可能发生的错误。这是处理 async / await 中错误的推荐方式。

总结

使用 async / await 可以使异步代码的结构更清晰，易于管理。它减少了回调函数的使用，使代码看起来更像是传统的同步代码，从而提高了代码的可读性和可维护性。在 TypeScript 中，async / await 还可以结合类型系统来提供更强的类型检查和错误检测。