随着前端技术的不断迭代，我们更需要关注代码质量和性能。在过去，我们可能使用了许多回调函数或者 Promise，但是在 ECMAScript 2017 中，async/await 被正式引入，大量地简化了异步操作的处理，是前端工程化过程中必不可少的一部分。在这篇文章中，我们将探讨如何使用 async/await 重构旧代码，以及一些使用 async/await 的常见技巧。
什么是 async/await？
async/await 是 ECMAScript 2017 引入的新特性，由 async 和 await 两个关键字组成。async 函数用来声明一个异步函数，当调用该函数时，将以异步方式执行函数内部的操作。而 await 关键字只能在 async 函数内部使用，用于暂停函数的执行，直到一个异步操作完成并返回结果。
例如，我们有一个API需要从服务器端获取数据，然后将其展示到前端页面上，我们可以使用 async/await 将其写成如下形式：
-- -------------------- ---- -------
----- -------- --------- -
--- -
----- -------- - ----- -------------------
----- ---- - ----- ----------------
------ -----
- ----- ------- -
-------------------
-
-
----- -------- ------------ -
----- ---- - ----- ----------
-- --------
-
-------------上面的代码中，我们使用 async/await 对获取数据和渲染数据两个操作进行了异步处理，使得代码更加简洁易懂。
如何重构旧代码
为了更好地理解 async/await 的使用，我们将给出两个案例，来重构旧代码。
1. 回调函数重构为 async/await
假设我们有一个功能，我们需要根据用户 ID 获取用户的详细信息，然后再根据这些信息获取用户的订单列表。在使用回调函数时，代码可能会如下所示：
-- -------------------- ---- -------
-------- ------------------- --------- -
--------------------- - ------ -- ----------
-
-------- ---------------------- --------- -
---------------------- - -------- -- ----------
-
---------------- -------- ---------- -
---------------------- -------- ----------- -
-----------------------
---
---当使用 async/await 时，代码会更加清晰简洁：
-- -------------------- ---- ------- ----- -------- ------------------- - ----- -------- - ----- --------------------- - ------ --- ------ --------- - ----- -------- ---------------------- - ----- --------- - ----- ---------------------- - -------- --- ------ ---------- - ----- -------- ------------ - ----- -------- - ----- ----------------- ----- --------- - ----- ----------------------- ----------------------- - -------------
上述代码使用 async/await 可以大大减少嵌套层数，在代码有错误时也更加好调试，整体性能也会有所提升。
2. Promise 封装重构为 async/await
在过去，我们可能封装了许多 Promise，以达到一个更好的编码体验，代码可能会如下所示：
-- -------------------- ---- -------
-------- --------------- -
------ --- ----------------- ------- -- -
--------------------- - ------ -- ---------- -- -
------------------
---
---
-
-------- ------------------------ -
------ --- ----------------- ------- -- -
---------------------- - -------- -- ----------- -- -
-------------------
---
---
-
---------------
---------------------
------------------
-------------------当使用 async/await 时，代码会更加简洁：
-- -------------------- ---- ------- ----- -------- --------------- - ----- -------- - ----- --------------------- - ------ --- ------ --------- - ----- -------- ------------------------ - ----- --------- - ----- ---------------------- - -------- --- ------ ---------- - ----- -------- ------------ - ----- -------- - ----- ---------------- ----- --------- - ----- ------------------------- ----------------------- - -------------
上述代码使用 async/await 可以大大简化 Promise 封装之后的操作，使得代码更加清晰易懂。
async/await 的常见技巧
在使用 async/await 时，还有一些技巧可以用来提高编码效率。
1. Promise.all
当有多个异步请求需要同时执行时，可以使用 Promise.all 将其封装为一个 Promise，使用 Promise.all 后，调用 await 将返回一个包含全部异步操作的 Promise 数组。
例如下面的代码片段：
async function myFunction() {
const [userInfo, orderList] = await Promise.all([fetchUserInfo(), fetchOrderList()]);
console.log(userInfo, orderList);
}上述代码返回一个数组，包含了 fetchUserInfo() 和 fetchOrderList() 两个异步操作的结果。
2. Promise.race
当我们声明多个 Promise，但只需要第一个 Promise 的结果时，此时可以使用 Promise.race 来实现。
例如下面的代码片段：
async function myFunction() {
const firstResult = await Promise.race([fetchUserInfo(), fetchOrderList()]);
console.log(firstResult);
}上述代码中将得到 fetchUserInfo() 和 fetchOrderList() 两个 Promise 的结果，但只返回第一个返回结果的 Promise。
结论
在前端工程化过程中，async/await 已成为必不可少的一部分。使用 async/await 可以大大简化代码量，让代码变得更加易读、易维护。在使用 async/await 时，需要理解异步操作和 Promise 的相关知识，同时也需要掌握一些常见的使用技巧，以提高编码效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67751c526d66e0f9aaf3e5fe