在传统的 JavaScript 中，异步编程通常使用回调函数来处理异步操作。这种方法虽然十分常见，但是却有很多缺点：代码难以读懂、错误处理变得复杂、回调地狱等问题。所以现在很多前端开发者开始使用 async / await 模式来简化异步编程。
在 TypeScript 中，async / await 的使用也是非常方便。在本篇文章中，我们将会介绍如何在 TypeScript 中使用 async / await 模式。同时，也会提供示例代码，让读者更好地理解这个概念。
简介
async / await 是 ES2017 中引入的一个新特性。它可以帮助我们更轻松地处理异步操作，避免回调函数和 Promise 出现的地狱式代码。除此之外，它还可以简化错误处理。使用 async / await，异步代码看起来就像同步代码一样简单易懂。
在 TypeScript 中使用 async / await，需要注意以下几点：
- TypeScript 的编译器可以自动将 ES2017 语法转换成目标 ECMAScript 版本的语法，以使得 async / await 代码能够运行在较早版本的浏览器或者 Node.js 上。
- TypeScript 编译器可以检测 async / await 函数是否正确地使用了 Promise，并在需要的时候自动插入类型定义。
接下来我们会分别介绍如何定义 async / await 函数以及如何正确地使用 Promise。
定义 async / await 函数
async / await 函数是一个异步函数，只有在其执行的异步操作完成之后，才会将其结果返回给调用者。定义一个 async / await 函数，需要使用 async 关键字。
下面是一个简单的示例：
async function getUsers() {
// 异步操作
const response = await fetch('https://api.github.com/users');
const users = await response.json();
return users;
}在上面的示例中，我们定义了一个 getUsers 函数。它使用了 async 关键字，表明这是一个异步函数。接下来我们使用了 fetch 函数发出了一个异步请求。由于 fetch 函数返回的是一个 Promise，我们可以使用 await 关键字等待异步请求完成，并将结果解析为 JSON 格式。最后，我们将解析出来的用户列表返回给了调用者。
处理 Promise
在上面的示例中，我们多次使用了 await 关键字来等待异步操作完成。这些异步操作都需要返回一个 Promise。如果我们使用了一个不返回 Promise 的函数，那么 TS 编译器将会在编译时给出错误提示。
在 async 函数中使用普通回调函数是不可行的。所以如果我们要使用一个回调风格的异步函数，我们需要手动将其转换为 Promise。
下面是一个 Promise 示例：
-- -------------------- ---- -------
-------- ---------- -
------ --- ----------------- ------- -- -
-- ----
-------------------------------------
-------------- -- -
-------------------------
--
------------ -- -
--------------
---
---
-
----- -------- ------ -
-- --------
----- ----- - ----- -----------
-------------------
-在上面的示例中，我们定义了一个 getUsers 函数。它返回了一个 Promise 对象，用于等待异步操作完成。接下来，在 async 函数中，我们使用 await 关键字来等待 getUsers 函数的完成，并得到了请求到的用户列表数据。最后，我们将这个列表打印到控制台中。
注意：如果我们要正确地捕捉 Promise 抛出的异常，我们需要使用 try / catch 语句。
-- -------------------- ---- -------
----- -------- ------ -
--- -
----- ----- - ----- -----------
-------------------
- ----- ------- -
---------------------
-
-在上面的示例中，我们使用 try / catch 语句来捕捉 getUsers 中的异常。第一个 try 语句块中包含了我们要执行的异步操作，而 catch 语句块用来处理异常情况。
总结
在 TypeScript 中使用 async / await 模式非常简单，只需要使用 async 和 await 这两个关键字即可。异步操作需要返回 Promise，而在 async 函数中调用异步操作可以使用 await 关键字，以等待异步操作完成。如果异步操作出现异常，我们可以通过 try / catch 语句来捕捉异常。
在实际编程中，我们应该尽量使用 async / await 模式来简化异步编程。这样可以使代码更加易读易懂，降低了代码的维护成本。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649d490348841e9894a08764