前端开发中，异步编程是一项非常重要的技能。在 TypeScript 中，我们可以使用异步函数和异步生成器来解决异步编程的问题。在本文中，我们将详细介绍 TypeScript 中的异步函数和异步生成器的用法和特性。
一、异步函数
异步函数是一种新的语法糖，可以使定义异步函数变得更加简单和清晰。它实际上是基于 Promise 的，将 Promise 和 async/await 的语法结合在一起，使得编写异步代码更加容易。
- 定义异步函数
在 TypeScript 中，我们可以使用 async 关键字来定义异步函数。例如：
async function fetchUser(id: number): Promise<User> {
const response = await fetch(`/users/${id}`);
const user = await response.json();
return user;
}以上代码定义了一个异步函数 fetchUser，通过使用 async 关键字和 await 关键字，它能够返回异步获取的用户信息。fetchUser 函数会请求带有指定 id 的用户信息，然后将 JSON 响应转换为 User 对象并返回。
- 使用异步函数
在使用异步函数时，我们可以像调用普通的函数一样调用它们，但是需要使用 Promise 来捕获异步操作的结果。例如：
fetchUser(1)
.then((user) => {
console.log(user.name);
})
.catch((error) => {
console.error(error);
});以上代码首先调用 fetchUser 函数来获取用户信息，然后通过 Promise 的 then 和 catch 方法来处理异步操作返回的结果或者错误。
二、异步生成器
异步生成器是一种用于生成迭代器的函数，可以使用 yield 关键字在异步函数内部暂停和恢复执行。它是 ES2018 中的一个新特性。使用异步生成器可以使得异步编程更加简单和清晰。
- 定义异步生成器
在 TypeScript 中，我们可以使用 async 和 yield* 关键字来定义异步生成器。例如：
async function* fetchUsers(): AsyncIterable<User> {
const response = await fetch('/users');
const users = await response.json();
for (const user of users) {
yield user;
}
}以上代码定义了一个异步生成器 fetchUsers，它会异步获取用户信息，然后使用 for...of 循环迭代数据并 yield 出每个用户信息。
- 使用异步生成器
在使用异步生成器时，我们可以通过 for await...of 语法来迭代异步生成器生成的数据。例如：
for await (const user of fetchUsers()) {
console.log(user.name);
}以上代码会使用 for await...of 语法来迭代 fetchUsers 异步生成器生成的用户信息，并输出每个用户的用户名。
总结
通过本文的介绍，我们了解了 TypeScript 中的异步函数和异步生成器的用法和特性。使用异步函数和异步生成器可以使得异步编程更加简单和清晰。希望本文能够对大家有所帮助。下面是完整的示例代码，大家可以运行查看效果：
-- -------------------- ---- -------
--------- ---- -
----- -------
------ -------
-
----- -------- ------------- -------- ------------- -
----- -------- - ----- ----------------------
----- ---- - ----- ----------------
------ -----
-
----- --------- ------------- ------------------- -
----- -------- - ----- ----------------
----- ----- - ----- ----------------
--- ------ ---- -- ------ -
----- -----
-
-
------------
------------ -- -
-----------------------
--
-------------- -- -
---------------------
---
--- ----- ------ ---- -- ------------- -
-----------------------
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/644f76ba980a9b385b8f16c3