在前端开发中，异步操作是必不可少的。在 ES6 中，我们已经有了 Promise 可以很好地解决异步操作的问题，但是 Promise 本身并不能完全满足我们的需求，尤其是在多个异步操作执行完毕之后需要进行某些处理的情况下。为了解决这个问题，ES7 提出了 async/await，它是一个更加强大的异步编程解决方案。
async/await 是什么
async/await 实际上就是 Generator 函数的语法糖。它让我们可以像写同步代码那样写异步代码，让异步操作更加容易理解和维护。
async 函数是一个返回 Promise 对象的异步函数。可以通过在函数前加上 async 关键字来定义一个 async 函数。在 async 函数里面可以使用 await 关键字来等待一个 Promise 对象的返回结果，而不需要使用 then 方法。
下面是一个简单的示例：
-- -------------------- ---- ------- ----- -------- ----------- - ----- -------- - ----- -------------------------------------- ----- ---- - ----- ---------------- ------ ----- - --------------------- -- - ------------------ ---
这段代码中，我们定义了一个名叫 fetchData 的 async 函数，它会调用 fetch 方法获取数据，并使用 await 等待数据的返回结果。然后将数据用 json 方法解析为 JavaScript 对象后返回。在 fetchData 函数外面调用我们可以使用 then 方法来获取到 fetchData 函数返回的数据。
async/await 的优势
async/await 的优势主要有以下几个方面：
代码更简洁
由于 async/await 让异步操作的代码看起来更像是同步的，因此代码更加简洁易懂。与 Promise 相比，我们不再需要使用 then 方法来处理 Promise 返回的结果，而是直接使用赋值操作符将 Promise 的返回值赋给一个变量，从而大大简化了代码的编写。
错误处理更加方便
在 Promise 中，我们需要在 then 方法的第二个参数里面处理错误，而在 async/await 中，我们可以使用 try/catch 来处理错误。这样不仅让错误处理更加方便，而且让代码结构更加清晰。
更加直观的代码流程
由于 async/await 让异步代码看起来更像是同步的，因此代码流程更加直观。我们可以直接按照代码书写的顺序书写业务逻辑代码，而不需要担心异步代码的复杂操作。
async/await 的原理
async/await 实际上是基于 Promise 实现的。在 async 函数内部，await 关键字会暂停函数的执行，直到 Promise 返回结果后再继续执行。await 关键字会对 Promise 对象执行 then 方法，等待 Promise 对象的状态变为 resolved 后才会继续执行后面的代码。
async 函数会将返回的结果包装成一个 Promise 对象，我们可以通过该 Promise 对象获取到 async 函数返回的结果。
下面是一个示例代码，介绍 async/await 的原理：
-- -------------------- ---- -------
-------- ----------------- -
------ --- ----------------- ------- -- -
------------- -- ---------------- -----
---
-
----- -------- ------ -
----- ------ - ----- ------------------
-------------------- -- ------
-
-------在这个示例代码中，我们首先定义一个 Promise 对象 myAsyncFunction，它会在 1 秒钟后返回一个字符串 done。然后我们定义了一个 async 函数 test，在 test 函数中使用 await 关键字等待 myAsyncFunction 方法返回的结果。当 myAsyncFunction 方法返回结果后，我们通过 console.log 方法打印出了返回的结果。
总结
async/await 是一个简洁、易懂、直观的异步编程解决方案。与 Promise 相比，它更加易于错误处理，代码更加简洁，代码流程更加直观。在实际项目开发中，我们可以充分利用 async/await 来提高代码的清晰度和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648e927248841e9894cf16f7