ES8 Async Await - 这是如何工作的
在编写现代前端代码时，异步操作是必不可少的部分，因为对于网络请求、数据获取和业务逻辑处理等操作都需要异步方法来执行。在 JavaScript 中，异步方法有很多种，如回调函数、Promise 和 Async/Await 等。
ES8 Async/Await 是 ECMAScript 2017 中新增加的特性，为 JavaScript 提供了一种更加简便、直观的方式来处理异步操作。本文将详细介绍 ES8 Async/Await 的工作原理，并提供示例代码来指导学习。
- Async/Await 的介绍
Async/Await 是一种基于 Promise 的编写异步代码的语法糖，它能够使异步操作的逻辑结构更加清晰明了、更容易管理。与回调函数与 Promise 相比，Async/Await 能够解决回调地狱的难题，同时也不必担心链式调用的问题。
- Async/Await 的工作原理
Async 关键字修饰的函数返回的是一个 Promise 对象，也就是说，Async 函数在内部会自动包装成一个 Promise，并且返回值的这个对象会根据 Async 函数中的代码执行情况，决定 Promise 对象处于 resolved 状态还是 rejected 状态。
await 关键字作为异步操作的标识符，只能在 Async 函数的内部使用。如果 await 关键字接受一个 Promise 对象，则它将执行等待，直到 Promise 对象处于 resolved 状态时，返回 Promise 对象的值；如果 Promise 对象处于 rejected 状态，则会抛出一个错误。
以下是一个示例代码：
async function getData() { try { const response = await fetch('/data'); const data = await response.json(); console.log(data); } catch(error) { console.log(error); } }
getData();
在上面的代码中，我们首先定义了一个 Async 函数 getData()，然后我们使用 await 关键字等待 fetch 函数返回的 Promise 对象的结果，并将其解析为 JSON 字符串时返回的 Promise 对象的结果。
如果 Promise 对象处于 rejected 状态，则会通过 try...catch 块中的 catch 代码块来处理错误。
- 深入理解 Async/Await
虽说 Async/Await 语法能够使异步代码更加直观，但是这也可能让使用者过度依赖它，从而忽略了其内部的实现细节。对于 Async/Await 的深入理解，有利于我们更好地使用它，从而避免常见的问题。
以下是一些常见的问题：
3.1 性能问题
Async/Await 在语法上表面上与 Promise 相似，但在内部执行时，它的工作流程却不同。Async/Await 会引入额外的代码，并在运行时创建额外的堆栈和暂停/继续流程。这意味着一些情况下会产生性能问题。
在使用 Async/Await 时，我们需要特别关注到并发性的问题。由于 Async/Await 在内部对 Promise 进行了封装，但是很多系统库不支持 promise-based APIs，这时就不能充分利用并发性，从而影响性能。
3.2 异常处理
对于异步操作的错误处理问题，我们需要注意到如果使用了 try/catch 来处理错误的话，Async/Await 是无法捕获 Promise 初始发生的错误。
3.3 没有嵌套块
Async/Await 使得异步操作的代码更加清晰可读，但是它也使得嵌套块的结构消失了。由于 Async/Await 不支持嵌套块，当我们需要处理递归逻辑的时候，就需要借助其他方法来解决。
- 结论
Async/Await 是一种非常实用和流行的语法糖，它提供了一种简便的方式来处理异步操作。在使用 Async/Await 时，我们需要理解它的工作原理、注意感性能和异常处理，并注意到因为它不支持嵌套块，也会对递归逻辑的处理产生影响。对于前端工程师来说，了解 Async/Await 是一个必备的技能。
以上是本文对 ES8 Async/Await 的详细解释，希望读者能够从中获得理解和指导。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66ee68346fbf96019721addf