深入浅析 javascript 中的 async/await：编写更优雅的异步代码
ECMAScript 2017 (ES8) 引入了 async 和 await 关键字，为 JavaScript 异步编程带来了革命性的变化。它们让异步代码的编写更简洁、更易读，更像同步代码，从而简化了诸如从 API 获取数据等耗时操作的处理。
在深入探讨 async/await 之前，让我们先回顾一下 JavaScript 中同步和异步编程的概念。同步编程中，任务按顺序依次执行，每个任务必须完成才能执行下一个。而异步编程允许任务在后台运行，JavaScript 可以继续执行其他任务，无需等待前一个任务完成。
众所周知，JavaScript 是单线程语言，一次只能执行一个任务。那么它如何处理异步代码呢？答案是事件循环。事件循环是 JavaScript 运行时环境的关键机制，它允许异步操作在不阻塞主线程的情况下运行，从而保持 JavaScript 的响应性。好了，让我们开始吧！
异步操作：更直观的理解
立即学习“Java免费学习笔记（深入）”；
在 async/await 出现之前，处理异步操作主要依赖于 Promise（ES6 引入）。让我们看一个例子：
这段代码展示了传统的 Promise 语法。Promise 构造函数创建一个新的 Promise 实例，它接收一个执行器函数，该函数包含 resolve 和 reject 两个参数。执行器函数包含异步操作的逻辑。在这个例子中，resolve 立即被调用，表示 Promise 成功完成并返回一个值。Promise 解析后，.then 方法被触发，执行其回调函数并记录结果。
然而，这种语法略显繁琐。async/await 的出现简化了 Promise 的处理，使其更易于理解和阅读。来看下面的例子：
为了定义异步函数，我们使用 async 关键字，它告诉 JavaScript 这不是一个普通的函数，而是一个异步函数。第二个例子展示了如何使用箭头函数实现同样的功能。
await 关键字与 async 配合使用，简化了 Promise 的处理。await 关键字只能在 async 函数内部使用，它必须出现在标记为 async 的函数中。现在，让我们更深入地了解其工作机制！
幕后机制：深入探索
许多开发者使用 async/await，但并非所有人都了解其底层机制。让我们通过一个例子来分析：
在这个例子中，我们使用 .then 方法来理解 Promise 的工作方式，并将其与 async/await 进行比较。当调用 handlePromise() 函数时，代码逐行执行。遇到 .then 方法时，它将回调注册到微任务队列，然后立即执行下一行，打印 “hello world”。
所有同步任务完成后，JavaScript 引擎检查微任务队列中是否有待处理的任务。五秒后，setTimeout 完成，其回调被推回调用堆栈。此时，Promise 已解析，注册的回调函数执行，记录结果。
简单来说，JavaScript 引擎不会等待，它直接跳到下一行代码。那么，使用 async/await 时，行为是否相同呢？让我们看看：
在这个例子中，调用 handlePromise() 函数时，首先打印 “the start”。遇到 await 关键字时，JavaScript 识别到这是一个异步操作，涉及一个 Promise。由于 setTimeout，Promise 需要五秒才能解析。此时，handlePromise() 函数被暂停（从调用堆栈中移除），await 之后的代码也被暂停。
JavaScript 引擎继续执行程序的其余部分。五秒后，Promise 解析，暂停的函数返回调用堆栈，handlePromise() 中剩余的代码 “Promise is solved” 和 “the end” 依次执行。
需要注意的是，暂停的函数不会阻塞主线程。如果在 handlePromise() 函数之外还有其他代码，这些代码会在 Promise 等待解析期间执行。
下面的例子展示了这种行为：
在这个例子中，首先输出 “开始”。遇到 await 时，函数暂停，JavaScript 继续执行外部代码，输出 “我们在外面”。五秒后，Promise 解析，函数恢复执行，输出 “Promise 已解析” 和 “结束”。
让我们再看一个使用 async/await 进行 API 调用的例子：
这段代码遵循相同的原则。遇到 fetch 函数时，getData() 函数暂停，等待 fetch 调用返回响应对象。响应可用后，函数恢复执行。响应正文需要解析成 JavaScript 对象才能使用，这涉及另一个 Promise，因此需要第二次 await。函数再次暂停，直到 Promise 解析。
两个 Promise 都解析后，getData() 函数恢复，解析后的数据打印到控制台。如果 API 响应失败怎么办？我们如何使用 async/await 处理错误？让我们在下一节探讨。
使用 Async/Await 处理错误
传统上，Promise 中的错误使用 .catch 方法处理。在 async/await 中，我们使用 try...catch 块：
如果 Promise 成功解析，try 块执行；如果 Promise 被拒绝，catch 块捕获并处理错误。
我们也可以使用传统方法：
catch 方法的功能与 try/catch 块相同。
总结
async/await 彻底改变了 JavaScript 处理异步操作的方式，使代码更易读、更易于维护。通过 async 和 await，我们可以编写更像同步代码的异步代码，提高代码清晰度。理解其内部机制（事件循环和微任务队列）以及错误处理（try/catch 或 .catch），可以更好地掌握现代 JavaScript 异步编程。
以上就是JavaScript 开发人员的 Aysnc 和 Await 实用指南的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1499725.html
微信扫一扫 
支付宝扫一扫 
