在过去的几年中，异步编程已经成为前端开发中必不可少的一部分，特别是在处理网络请求和处理数据流时。Javascript 提供了许多机制来处理异步编程，例如回调函数、Promise、Generator 等等。但是这些机制的使用方式并不总是简单和直观，这也让很多开发者感到困惑。
在这样的背景下，ES7 引入了 async/await 机制，这是一种全新的异步编程方式，通过语言层面的支持，使得异步编程变得更加清晰和可读。它可以使得异步代码具有同步代码的风格，同时不会阻塞主线程的执行。ES7 代表了整个异步发展的方向，它为异步编程提供了一个更加友好和高效的解决方案。
手动处理类异步示例
在介绍 async/await 的使用方法前，让我们来看一下，如何在 Javascript 中进行异步编程。下面是一个模拟网络请求的代码示例：
-------- ----------------- -
------------- -- -
----- ---- - - ----- -------- ---- ---- --
---------------
-- ------
-
-------------- -- -
--------------------
---在这里，我们使用了 setTimeout 来模拟了一个网络请求的时间，然后在回调函数 callback 中返回了请求到的数据。在这个例子中，我们首先定义了一个 getData 函数，它被传入了一个回调函数 callback，用来接收请求到的数据。在 getData 函数中，它会延迟 1 秒后返回数据 data。最后，我们通过 getData 函数来请求数据，并在回调函数中输出数据。
这种方式看起来比较直观，但是当代码复杂度增加时，回调函数的嵌套层数也会随之增加，这就是著名的“回调地狱”问题。当我们不断嵌套回调函数时，会导致代码可读性差、难以维护、难以调试。
使用 Promise 实现异步示例
为了解决回调地狱问题，ES6 标准中引入了 Promise 机制，它可以使异步代码更加清晰和可读。下面是使用 Promise 实现的网络请求的示例：
-------- --------- -
------ --- --------------- -- -
------------- -- -
----- ---- - - ----- -------- ---- ---- --
--------------
-- ------
---
-
---------
------------ -- -
--------------------
---在这里，我们定义了一个 getData 函数，它返回一个 Promise 实例。在 Promise 实例中，我们使用 setTimeout 来模拟网络请求，然后在 resolve 方法中返回请求到的数据。在最后，我们通过 getData 函数获取数据，然后使用 then 方法来处理异步结果。
使用 Promise 机制可以有效地解决了回调地狱问题，但是仍然需要在 .then 中处理异步结果。并且当有多个异步请求时，仍然需要使用更加复杂的链式调用。
async/await 实现异步示例
在 ES7 标准中，使用 async/await 机制可以让我们更加直观地处理异步代码。async/await 是基于 Promise 机制实现的，但是它可以让代码更加简洁和易读。我们来看一下使用 async/await 实现异步请求的示例：
-------- --------- -
------ --- --------------- -- -
------------- -- -
----- ---- - - ----- -------- ---- ---- --
--------------
-- ------
---
-
----- -------- ---------- -
----- ------ - ----- ----------
--------------------
-
-----------在这里，我们定义了一个 getData 函数，它返回一个 Promise 实例。在 showData 函数中，我们使用了 async 关键字来定义异步函数，然后使用 await 关键字来等待异步调用返回结果。在这个例子中，它会等待 1 秒后返回数据 data。最后，我们通过 showData 函数来展示请求到的数据，这里的代码看起来就像同步代码，可以让异步代码更加直观和易读。
总结
ES7 中引入的 async/await 机制，提供了一种全新的异步编程方式，能够使异步代码具有同步代码的风格。在复杂的异步场景中，async/await 的表现优于回调和Promise两种方式，它可以使异步代码更加清晰和易读。因此，我们在开发时可以优先考虑使用 async/await 机制来处理异步请求。
示例代码
下面是完整的示例代码：
-------- --------- -
------ --- --------------- -- -
------------- -- -
----- ---- - - ----- -------- ---- ---- --
--------------
-- ------
---
-
----- -------- ---------- -
----- ------ - ----- ----------
--------------------
-
-----------来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6545cca47d4982a6ebf6b3a6