众所周知，JavaScript 是一门单线程语言，因此在处理异步操作时，我们需要使用回调函数、Promise、Generator 等方式。而在 ES7 中，新增了异步函数（async/await）这一语法糖，可以更加方便地处理异步操作，让代码更加简洁易懂。
async/await 的基本概念
在介绍 async/await 的使用实例之前，我们先来了解一下它的基本概念。
async 函数是异步函数的一种声明方式，它会返回一个 Promise 对象。在 async 函数中，我们可以使用 await 关键字来等待 Promise 对象的返回结果，然后再继续执行下面的代码。
举个例子，我们可以使用以下代码声明一个 async 函数：
----- -------- ----------- - ----- ------ - ----- ------------------------------------------------------ ----- ---- - ----- -------------- ------------------ -
在上面的代码中，我们声明了一个名为 fetchData 的 async 函数，它会异步获取一个 JSON 数据，并将其打印出来。
在 fetchData 函数中，我们使用了 await 关键字等待 fetch 函数返回的 Promise 对象，然后使用 await 关键字等待 result.json() 返回的 Promise 对象。这样就可以保证我们在获取到数据之后再进行打印操作。
async/await 的使用实例
接下来，我们将通过一个实际的案例来演示 async/await 的使用实例。
假设我们需要从一个 API 中获取用户的信息，并将其显示在页面上。在获取用户信息的过程中，我们需要先获取用户的 ID，然后再通过用户 ID 获取用户的详细信息。下面是使用 async/await 来实现这个功能的代码：
----- -------- ------------- -
--- -
----- ------ - ----- ------------
----- -------- - ----- -----------------------
--------------------------
- ----- ------- -
---------------------
-
-
----- -------- ----------- -
----- ------ - ----- ------------------------------------------------------
----- ---- - ----- --------------
------ --------
-
----- -------- ---------------------- -
----- ------ - ----- --------------------------------------------------------------
----- ---- - ----- --------------
------ -----
-
-------- ------------------------- -
----- - ----- ------ ----- - - ---------
----------------------------------------- - -----
------------------------------------------ - ------
------------------------------------------ - ------
-
--------------在上面的代码中，我们声明了三个异步函数：getUserInfo、getUserId 和 getUserDetails。
getUserInfo 函数会调用 getUserId 和 getUserDetails 函数，获取用户信息并将其显示在页面上。
getUserId 函数会异步获取用户 ID，并返回该 ID。
getUserDetails 函数会异步获取用户的详细信息，并返回该信息。
在 getUserInfo 函数中，我们使用 try/catch 块来捕获可能出现的异常。在 getUserInfo 函数中，我们使用 await 关键字等待 getUserId 和 getUserDetails 函数返回的 Promise 对象。这样就可以保证我们在获取到数据之后再进行下一步操作。
在 displayUserInfo 函数中，我们会将获取到的用户信息显示在页面上。
最后，我们调用 getUserInfo 函数来获取用户信息并将其显示在页面上。这样，我们就成功地使用 async/await 实现了异步获取用户信息并将其显示在页面上的功能。
总结
通过以上的实例，我们可以看到 async/await 的使用非常简单，只需要使用 async 函数和 await 关键字即可。使用 async/await 可以让我们更加方便地处理异步操作，让代码更加简洁易懂。
当然，在使用 async/await 的过程中，我们也需要注意一些问题，比如异步操作的错误处理、代码的兼容性等问题。但总的来说，async/await 是一种非常有用的语法糖，可以让我们更加高效地编写 JavaScript 代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65f90d5ed10417a2224ccf76