在前端开发中，异步处理是非常常见的操作。ECMAScript 2015 (ES6) 通过引入 Promises 和 Generators 解决了异步处理的问题，然而依然存在一些让开发人员感到困惑的地方，例如回调地狱 (callback hell) 和复杂的嵌套结构。为了进一步简化异步的操作，ECMAScript 2017 引入了 async 和 await 关键字，通过这两个关键字，可以更加优雅地管理异步代码，让开发者能够更加专注于业务逻辑的实现。
什么是 async/await
async 和 await 是一种简化异步操作的机制，它们是作为 ES2017 的标准引入的。async 定义一个函数是异步的，而 await 则暂停函数的执行，等待异步操作完成，然后将异步操作的结果返回。
async 和 await 主要用于解决回调地狱的问题，使得异步操作代码更加简洁易读。它通过执行异步操作，将异步操作转换成同步操作来进行处理，进而使异步操作像同步操作一样被执行。
为什么使用 async/await
异步操作虽然提高了程序的性能，但存在一些不便之处。因为异步代码运行的顺序是不确定的，所以很难跟踪它们的执行顺序。当回调函数开始嵌套多个异步操作时，整个代码就变得难以理解和维护。如下所示：
-- -------------------- ---- -------
------------------- -- -
---------------------
------------------- -- -
----------------------
------------------- -- -
---------------------
-- ------
-- ------
-- -----为解决这些问题，async/await 机制被引入。它可以使同步代码和异步代码混合在一起运行，从而使代码更好理解和管理。
async/await 示例
-- -------------------- ---- -------
----- -------- ---------- -
--- -
----- -------- - ----- ----------------------------------------------------
----- ---- - ----- ----------------
------------------
- ----- ------- -
-------------------
-
-
-----------如上所示，我们使用了 async 关键字来定义一个异步函数 getUsers。在 getUsers 函数内部，我们使用了 await 关键字来暂停代码的执行，直到异步请求结束，并且当异步操作出现错误时，使用了 try...catch 实现了错误处理。
在上面的示例中，我们使用 fetch 拉取了一个远程接口，并且将其解析成 JSON 格式。由于 await 关键字会暂停代码的执行，所以我们实际上是在等待 fetch 执行完成。
async/await 最佳实践
- 避免嵌套多层的 async/await 函数，这样会使代码变得难以维护。
- 使用
Promise.all()在并行执行多个异步操作时，这将使代码更加优雅。 - 使用
try...catch处理异步请求中的错误，以保证代码的健壮性。
总结
async/await 是 ES 2017 引入的一种新的异步编程机制，其主要目的是简化异步代码的编写。通过使用 async 和 await 可以方便地声明异步函数和暂停函数的执行，简化了代码的编写，并且避免了嵌套多层的回调函数的问题。在实际的开发中，应当遵循最佳实践，确保代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f2b70cf6b2d6eab3c52517