随着前端应用越来越复杂，异步代码也越来越普遍。传统的回调函数和 Promise 对象虽然能够处理异步代码，但是它们让异步代码变得冗长而难以维护。ECMAScript 2017 引入了 async/await 方法，它们可以让异步代码更加清晰、易于编写和维护。本文将介绍 async/await 方法的用法，并提供示例代码。
异步代码的问题
在了解 async/await 之前，让我们先看看异步代码存在哪些问题。假设我们有一个函数 fetchData，它会从远程 API 获取数据并执行回调函数。这里是一个使用回调函数的例子：
-- -------------------- ---- -------
-------- ------------------- -
----- --- - --- -----------------
--------------- -------------
---------- - -- -- -
-- ----------- --- ---- -
-------------- ------------------------------
- ---- -
------------ -------------- ----------
-
--
----------- - -- -- -
------------ -------------- ----------
--
-----------
-
--------------- ----- -- -
-- ----- -
-------------------
- ---- -
------------------
-
---这里有一些明显的问题：
- 回调函数导致代码变得冗长并难以阅读。
- 当有多个异步操作发生时，回调函数会形成回调地狱，使代码难以维护。
- 无法使用常见的控制流语句（如
if和try-catch）来处理异步操作结果。
因此，我们需要一种更好的方法来管理异步代码。
使用 Promise
Promise 对象是一种更好的处理异步代码的方式。在使用 Promise 之前，我们需要对 fetch 函数进行一些修改，以便它返回一个 Promise 对象：
-- -------------------- ---- -------
-------- ----------- -
------ --- ----------------- ------- -- -
----- --- - --- -----------------
--------------- -------------
---------- - -- -- -
-- ----------- --- ---- -
--------------------------------------
- ---- -
---------- -------------- ----------
-
--
----------- - -- -- -
---------- -------------- ----------
--
-----------
---
-然后我们可以使用 Promise 的 then 方法来处理异步操作结果：
fetchData() .then(data => console.log(data)) .catch(err => console.error(err));
这是一个改进，但是我们仍然需要将回调函数传递给 then 方法，并且仍然无法使用常规控制流语句来处理异步代码。
使用 async/await
async/await 是一种更好的方式，它允许我们使用常规控制流语句来处理异步操作结果。通过将 Promise 对象与 async/await 方法结合使用，我们可以编写异步代码，这些代码的结构类似于同步代码。
这里我们将再次修改 fetchData 函数，以便它返回 Promise 对象：
-- -------------------- ---- -------
-------- ----------- -
------ --- ----------------- ------- -- -
----- --- - --- -----------------
--------------- -------------
---------- - -- -- -
-- ----------- --- ---- -
--------------------------------------
- ---- -
---------- -------------- ----------
-
--
----------- - -- -- -
---------- -------------- ----------
--
-----------
---
-现在我们可以在外层函数中使用 async 关键字来标记该函数为异步函数。我们可以在异步函数中使用 await 关键字来等待 Promise 对象的结果：
async function getData() {
try {
const data = await fetchData();
console.log(data);
} catch (err) {
console.error(err);
}
}这里有一些需要注意的地方：
- 我们可以使用
async关键字来将函数声明为异步函数。 - 使用
await关键字等待 Promise 结果。 - 我们可以使用
try-catch块来处理 Promise 的reject结果。
示例代码
下面是一个完整的例子，它演示了如何使用 async/await 方法管理异步代码：
-- -------------------- ---- -------
-------- ----------- -
------ --- ----------------- ------- -- -
----- --- - --- -----------------
--------------- -------------
---------- - -- -- -
-- ----------- --- ---- -
--------------------------------------
- ---- -
---------- -------------- ----------
-
--
----------- - -- -- -
---------- -------------- ----------
--
-----------
---
-
----- -------- --------- -
--- -
----- ---- - ----- ------------
------------------
- ----- ----- -
-------------------
-
-
----------在上面的例子中，我们将 fetchData 函数改为返回 Promise 对象，然后将 getData 函数标记为异步函数，并在其中等待 fetchData 的结果。如果 Promise 被成功解决，则将数据记录到控制台中，否则将显示错误。
总结
async/await 方法能够显著提高异步代码的可读性和可维护性。通过将 Promise 对象与 async/await 方法结合使用，我们可以编写易于阅读和维护的异步代码。如果你正在开发前端应用，并且想让异步代码更加清晰、易于管理，请尝试使用 ECMAScript 2017 提供的 async/await 方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652bc5227d4982a6ebda25e0