在前端开发中，异步请求是非常常见的操作，它可以使页面更加流畅，并且可以避免页面卡顿。在 TypeScript 中，我们可以使用 Promise 和 async/await 等语法来处理异步请求。
Promise
Promise 是一种异步编程的解决方案，它可以解决回调函数嵌套的问题，使代码更加清晰和易于维护。在 TypeScript 中，Promise 也是一个重要的异步编程工具。
Promise 的基本用法
Promise 是一个对象，它有三种状态：pending（等待态）、fulfilled（成功态）和 rejected（失败态）。当 Promise 对象的状态发生改变时，会触发相应的回调函数。
下面是 Promise 的基本用法：
-- -------------------- ---- -------
----- ------- - --- ----------------- ------- -- -
-- ----
------------- -- -
----- ------ - --------------
-- ------- - ---- -
----------------
- ---- -
---------- ----------------
-
-- ------
---
--------------------- -- -
--------------------
---------------- -- -
---------------------
---在上面的代码中，我们创建了一个 Promise 对象，它会在 1 秒钟后返回一个随机数。如果随机数大于 0.5，就会触发 resolve 回调函数，否则就会触发 reject 回调函数。在 then 方法中，我们可以获取到 resolve 回调函数的返回值，在 catch 方法中，我们可以获取到 reject 回调函数的错误信息。
Promise 的链式调用
Promise 还可以进行链式调用，这样可以使代码更加简洁和易于阅读。
下面是 Promise 的链式调用示例：
-- -------------------- ---- -------
-------- ------------- -
------ ---------------------------------- -- -
-- ------------- -
------ ----------------
- ---- -
----- --- -------------- -------- --- --- -----
-
---
-
-------- ------------------ ------- -
------ ----------------------------------------------- -- -
-- ------------- -
------ ----------------
- ---- -
----- --- -------------- -------- --- --- -----
-
---
-
----------------------------- -- -
------ ----------------------------
--------------- -- -
-------------------
---------------- -- -
---------------------
---在上面的代码中，我们使用 fetch 函数来进行异步请求，getUserInfo 函数和 getRepos 函数都返回一个 Promise 对象。在 getUserInfo 函数中，我们首先判断响应是否成功，如果成功就返回解析后的 JSON 数据，否则就抛出一个错误。在 getRepos 函数中也是同样的逻辑。在 Promise 的链式调用中，我们可以使用 then 方法来依次执行异步请求，最后使用 catch 方法来捕获错误。
async/await
async/await 是 ECMAScript 2017 标准中引入的异步编程语法，它可以让异步代码看起来像同步代码一样，使代码更加易于理解和维护。在 TypeScript 中，我们也可以使用 async/await 来处理异步请求。
async/await 的基本用法
async/await 的基本用法非常简单，只需要在异步函数前面添加 async 关键字，然后使用 await 关键字等待异步操作的结果即可。
下面是 async/await 的基本用法示例：
-- -------------------- ---- -------
----- -------- ----------- -
--- -
----- -------- - ----- -------------------
----- ---- - ----- ----------------
------------------
- ----- ------- -
---------------------
-
-
------------在上面的代码中，我们定义了一个异步函数 fetchData，使用 try/catch 语句来捕获错误。在函数中，我们首先使用 await 关键字等待 fetch 函数的结果，然后使用 await 关键字等待 response.json 函数的结果，最后打印出数据。
async/await 的错误处理
在 async/await 中，我们可以使用 try/catch 语句来捕获错误，也可以使用 Promise 的 catch 方法来捕获错误。
下面是 async/await 的错误处理示例：
-- -------------------- ---- -------
----- -------- ----------- -
----- -------- - ----- -------------------
-- -------------- -
----- --- -------------- -------- --- --- -----
-
----- ---- - ----- ----------------
------------------
-
------------------------- -- -
---------------------
---在上面的代码中，我们使用 if 语句来判断响应是否成功，如果不成功就抛出一个错误。在调用 fetchData 函数时，我们使用 catch 方法来捕获错误。
总结
在 TypeScript 中，我们可以使用 Promise 和 async/await 来处理异步请求。Promise 可以解决回调函数嵌套的问题，使代码更加清晰和易于维护；async/await 可以让异步代码看起来像同步代码一样，使代码更加易于理解和维护。在实际开发中，我们可以根据具体的场景选择合适的异步编程工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/662b81c8d3423812e4916079