在 JavaScript 的 ES7 新版本中，新增了 async/await 关键字，用于简化基于 Promise 的异步编程。这一新特性极大地提高了 JavaScript 的可读性和可维护性，让并发任务的执行变得更为简单、直观。
异步编程的痛点
在 JavaScript 中，异步编程是一项必要的技能。在处理浏览器中的各种操作，例如 AJAX 请求、定时器等等时，JavaScript 引擎必须先执行完当前任务才能继续执行后续任务。这导致了异步编程的流程通常是回调函数的方式，代码阅读起来非常繁琐和不可读。例如：
--------------------------------------------------------------------- - ------ ---------------- ---------------------- - ------------------- ------ ----------- ------------------------ - ---------------------- ------- ---
虽然这样的异步方式看起来不太友好，但是当我们面对多个异步调用嵌套的时候，代码的可读性将会更加糟糕。
async/await 的作用
async/await 关键字是 ES7 中的一种新特性，它能够大大简化异步编程的过程，让我们能够以同步的方式来编写异步代码。通俗地说，就是让那些结局异步编程中"回调地狱"的代码看上去就像普通的同步代码一样，从而大大提高代码的可读性和可维护性。
async 函数只需要在定义函数体的前面添加一个 async 关键字即可，await 则只需在异步操作的前面添加即可。例如：
----- -------- ------------- - ----- -------- - ----- ---------------------------------------------- ----- ---- - ----- ---------------- ------------------- ------ ----------- -
上述代码中，我们定义了一个名为 fetchGithub 的 async 函数，内部使用了两次 await，分别用于在 API 返回时才接着运行函数。由此可见，使用 async/await 时可以将 Promise 的回调方式消除。
async/await 的流程
虽然 async/await 代码简单，但它的工作流程还是有细微差别的。async 函数会在执行函数时自动返回一个 Promise 对象。在返回的 Promise 对象中，如果 async 函数执行无故失败，那么 Promise 对象就会变成 reject 状态。否则 Promise 将返回 async 函数的返回值，如果 async 函数只是简单地返回一个值，那么 Promise 对象也将返回该值。任何 Promise 中的异常都可以使用 try/catch 来捕获。
----- -------- ----- - ------ ------ - ----------------- -- - -------------------- -- -- ----- --- ----- -------- ----- - ----- --- ---------------- -------- - ----------------- -- - --------------------- -- -- ---------- ------ ---
async/await 和 Promise 的比较
虽然 async/await 关键字已经大大简化了异步代码的编写，但是它还是基于 Promise 的。实际上，async/await 是 Promise 的语法糖，既可以使用 async/await，也可以直接使用 Promise 编写异步代码。以下代码可以帮助我们对比时使用 async/await 和 Promise：
-- -- -----------
----- -------- --------- -
----- -------- - ----- ------------------------------------------------------
----- ---- - ----- ----------------
------ -----
-
-- -- -------
-------- ---------------- -
------ -----------------------------------------------------
-------------- -- -----------------
-从上面我们可以发现，使用 async/await 可以让异步代码变得更简单易读。我们可以通过类似“同步式”的代码去处理异步调用，而且代码量也更少更清晰。
异步编程的最佳实践
最后我们来分享一下异步编程的最佳实践。下面这个例子清晰地演示了如何利用 JavaScript 中丰富的异步 API 来实现顺序的异步流程：
----- -------- ----- -
--- -
----- ------- - ----- --------
----- ------- - ----- ---------------
----- ------- - ----- ---------------
---------------------
- ----- ----- -
-----------------
-
-
-------- ------- -
------ --- --------------- -- ------------- -- -
---------------------
-----------
-- -------
-
-------- -------------- -
------ --- --------------- -- ------------- -- -
---------------------
--------- - ---------
-- -------
-
-------- -------------- -
------ --- --------------- -- ------------- -- -
---------------------
--------- - ---------
-- -------
-这段代码中，使用了 run 方法作为异步流程的启动函数，该函数下调用了三个异步方法。每个异步调用都是基于 Promise 的，因此可以使用 await。执行步骤非常简单，因为每个步骤都基本相同。在每个异步操作完成后，我们使用 resolve 去通知程序下一步的执行，以及 reject 来处理异常。try/catch 则用于捕捉可能出现的异常。
总结
在 JavaScript 异步编程中，async/await 关键字已经成为了我们必备的工具。这些简单和容易上手的功能是通过 Promise 的扩展得到的。使用 async/await，我们开始将 Promise 编程变得更加简单和直观。
当然，async/await 并不是用于所有异步操作的“万灵药”——像事件和流这样的异步模式仍然需要单独考虑。但它在许多常见的异步场景中，比如与服务器端的通信，都是非常有用的。需要注意的是，async/await 还需要 ECMAScript 2017 的支持，因此对于那些使用更旧版本 JavaScript 引擎或受制于早期 ECMAScript 标准的程序员，就需要专注于其替代解决方案，例如使用 Promise 编写异步代码。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/654457697d4982a6ebe380c6