前言
在编写前端代码时，处理异步操作是必不可少的。从 XHR 到 Promise，现在更加重要的是 async/await。async/await 是一个已经成熟的、被广泛使用的 ES2017 标准。它允许编写更加易读和维护的异步代码，并能够使代码结构更为清晰。在本篇文章中，我们将学习 ES6 中 async/await 的使用方法以及如何在日常开发时充分使用它。
同步和异步
JavaScript 中的同步和异步编程是常用的编程概念。在同步编程中，代码将按照指定的顺序执行。在异步编程中，代码将按一定的顺序执行，但不会等待操作完成。异步编程的好处是，不必等待长时间运行的 IO 操作，这可以提高代码的效率和性能。
我们来看一个例子，这里我们将使用 Promise 来实现异步操作。假设我们有一个函数，需要查询用户数据。在异步模式下，我们需要使用 Promise 来解决此问题。
-- -------------------- ---- -------
-------- --------------- -
------ --- ----------------- ------- -- -
------------- -- -
--- ---- - --------------- -- ------- --- -------
-- ------ -
-------------
- ---- -
---------- ---- ---- -- --------- --------
-
-- -----
--
-
----------
---------- -- ------------------
------------ -- ---------------------这里我们定义了一个 getUser 函数，该函数返回一个 Promise。当我们调用它时，我们需要使用 .then 和 .catch 来处理异步操作的成功和失败状态。在这里，我们使用 .then 打印用户数据并使用 .catch 打印错误消息。
async/await 简介
ES6 中的 async/await 使异步操作变得十分简单和可读。顾名思义，async 和 await 是用于处理异步操作的两个关键字。使用 async/await 可以使代码更加清晰易懂，它提供一种更符合直觉的方式来处理异步操作。
-- -------------------- ---- -------
----- -------- --------------- -
------ --- ----------------- ------- -- -
------------- -- -
--- ---- - --------------- -- ------- --- -------
-- ------ -
-------------
- ---- -
---------- ---- ---- -- --------- --------
-
-- -----
--
-
----- -------- ------------- -
--- -
--- ---- - ----- ----------
-----------------
- ----- ------- -
--------------------
-
-
-------------注意我们使用了 async 函数修饰符来定义 getUser 和 doSomething 函数。在 doSomething 中，我们使用 try/catch 来处理异步操作的成功和失败状态。在 try 块中，我们使用 await 关键字等待 getUser 函数返回结果。当异步操作完成时，await 将返回异步操作的结果，然后在 doSomething 中打印出来。如果异步操作失败，则 catch 块将捕捉到错误并打印出来。
async/await 的使用
现在我们已了解了 async/await 的基本知识，接下来我们将查看如何在实际情况下使用它们。
1. 处理多个异步操作
有时，我们需要在一个异步操作完成后执行另一个异步操作。在这种情况下，可以使用多个异步操作来解决问题。例如，以下代码将查询用户数据，然后将其保存到数据库中：
-- -------------------- ---- -------
----- -------- -------------- -
--- -
----- ----------------------
----------------- ----- --------------
- ----- ------- -
--------------------
-
-
----- -------- ------------------- -
--- -
--- ---- - ----- ---------------
----- --------------
- ----- ------- -
--------------------
-
-
--------------在 doSomething 中，我们使用 await 等待 getUser 完成，并使用返回的用户数据调用 saveUser。在 saveUser 中，我们使用 await 等待 saveUserDataToDB 完成，并在成功时打印消息。如果出现任何错误，则将在 catch 中处理。
2. 并行处理异步操作
我们还可以使用 Promise.all 将几个异步操作同时处理。下面的代码将查询多个用户数据，并在所有异步操作完成时将它们的数据返回。
-- -------------------- ---- -------
----- -------- ----------------- -
--- -
--- -------- - ------------------ -- ----------------
--- ----- - ----- ---------------------
------ -----
- ----- ------- -
--------------------
-
-
------------ -- ---
----------- -- -------------------
------------ -- ---------------------在 getUsers 中，我们使用 Promise.all 并行执行多个异步操作。在 await 语句处等待异步操作完成，并在完成后返回用户数据数组。在 catch 块中，我们处理任何错误。
3. 错误处理
async/await 使错误处理变得更加容易。在前面的例子中，我们已经像使用 Promise 接口一样使用了 try/catch 语句来处理异步操作中的错误，这样可以使代码更加清晰易读。
async function doSomething(userId) {
try {
let user = await getUser(userId)
await saveUser(user)
} catch (error) {
console.error(error)
}
}如果任何操作抛出异常，则会导致函数的执行中止。任何 await 后面的代码都不会执行，并且控制权将传递到 catch 块中。在这里，我们将记录错误消息并继续处理其他操作。
结论
async/await 是一项强大的技术，可以大大简化异步代码的编写。使用 async/await，我们可以更加清晰易懂地处理并行和串行异步操作，以及处理异常。此外，async/await 支持 ES6 中其他功能（例如箭头函数和模块）的使用，因此与其他 ES6 功能完美集成。通过学习 async/await 以及其他现代 JavaScript 技术，前端开发人员可以编写更加可读、高效和可维护的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674d4408a336082f254ae370