前言
在前端开发中，经常需要处理异步操作。以往我们使用回调函数或Promise来处理异步操作，但是这些方法不是很优雅且不易于维护。ES7（ES2017）引入了 async/await ，让我们的异步操作更简单、更直观。
本文将介绍 async/await 的使用，并通过实例加深对 async/await的理解。
async/await 的简介
async/await 是一套语法糖，它将 Promise 的异步操作转化为同步的写法，使得处理异步操作时更直观、更易于理解、维护，并且避免了类似 Promise 链式调用的 callback hell。
async
async 函数是异步函数的一个修饰符，它会将函数返回一个 Promise，且 Promise 的结果将会是 async 函数返回的那个值，如果 async 函数内部抛出了一个错误，那么 Promise 将会 reject。
下面是一个简单的例子：
async function asyncFunc() {
return 'Hello';
}await
await 关键字可以等待 Promise 的解决和拒绝，并将解决值存储在一个常量中。 await 关键字后面只能跟 Promise 对象。
下面是一个简单的例子：
async function asyncFunc() {
const result = await Promise.resolve('world');
return 'Hello ' + result;
}实例
假设我们要实现一个可以从后台获取数据并将数据渲染到页面上的应用程序。我们通过使用 async/await 来实现异步操作的处理。
数据获取
我们通过一个 mock API 来获取数据，在这个 API 中，我们从后台获取一个包含一些名字和邮件地址的数据。
-- -------------------- ---- -------
--- -------- - -----
----- -------- ----------- -
--- -
----- -------- - ----- ----------------------------------------------------
-- -------------- -
----- --- ---------------------------
-
-------- - ----- ----------------
- ----- ------- -
-------------------- ---- -------- -------
-
-数据渲染
当数据获取成功后，我们需要将数据渲染到页面上。这里我们在一个简单的表格中展示数据。
-- -------------------- ---- -------
-------- -------------------- -
----- ----- - --------------------------------
----- ----- - --------------------------------
----- ----- - --------------------------------
-------------------------
-------------------------
----- --------- - -----------------------------
-----------------------------
--- ---- ----- -- -------- ---------- -
----- -- - -----------------------------
-------------- - ------
--------------------------
-
----- --------- - --------------------------------
-----------------------------
--- ---- ---- -- --------- -
----- --- - -----------------------------
---------------------------
--- ---- ----- -- -------- --------- -
----- -- - -----------------------------
-------------- - ------------
--------------------
-
-
---------------------------------
-绑定应用程序
最后，我们需要组合 fetchData 和 renderData 函数，并在应用程序初始化时调用。
async function init() {
await fetchData();
renderData(userData);
}
init();完整代码如下：
-- -------------------- ---- -------
--- -------- - -----
----- -------- ----------- -
--- -
----- -------- - ----- ----------------------------------------------------
-- -------------- -
----- --- ---------------------------
-
-------- - ----- ----------------
- ----- ------- -
-------------------- ---- -------- -------
-
-
-------- -------------------- -
----- ----- - --------------------------------
----- ----- - --------------------------------
----- ----- - --------------------------------
-------------------------
-------------------------
----- --------- - -----------------------------
-----------------------------
--- ---- ----- -- -------- ---------- -
----- -- - -----------------------------
-------------- - ------
--------------------------
-
----- --------- - --------------------------------
-----------------------------
--- ---- ---- -- --------- -
----- --- - -----------------------------
---------------------------
--- ---- ----- -- -------- --------- -
----- -- - -----------------------------
-------------- - ------------
--------------------
-
-
---------------------------------
-
----- -------- ------ -
----- ------------
---------------------
-
-------总结
async/await 相比以往的回调函数和 Promise 来说，更加直观和易于理解，它让我们可以将异步操作看作同步操作来处理，并且更加优雅和易于维护。因此，我们应该尽可能使用 async/await 来处理异步操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646c1f2b968c7c53b0b2bd70