async,await底层实现

HuanyouRong

于 2024-03-27 18:11:13 发布

阅读量228

点赞数 3

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_68110835/article/details/137085100

版权

async/await 是 ECMAScript2017 引入的异步编程特性，通过使异步代码像同步代码一样编写，使代码更加清晰易读。底层实现上，async/await 是基于 Promise 和生成器（Generator）来实现的。

以下是 async/await 的底层实现的简要步骤：

async 函数：当一个函数被标记为 async 时，它会返回一个 Promise 对象。内部的值会被自动封装在一个 Promise 中。例如：

async function myAsyncFunction() {
    return 42;
}
// 等同于
function myAsyncFunction() {
    return Promise.resolve(42);
}

await 关键字：await 关键字用于等待一个 Promise 对象。当遇到 await 关键字时，函数会暂停执行直到 Promise 对象状态变为 resolved（已解决）或 rejected（已拒绝）。例如：

let result = await someAsyncFunction();

运行时环境：在运行时，JavaScript 引擎会将 async 函数转换为状态机。当遇到 await 关键字时，函数会被挂起，并且返回一个 Promise。当 await 后面的 Promise 对象状态变为 resolved 或 rejected 时，被挂起的函数会继续执行后续代码。
错误处理：使用 try...catch 来捕获 await 表达式中产生的错误。await 表达式的返回值被解析为 fulfilled（已完成）状态时，正常执行到 try 代码块；如果被解析为 rejected 状态，则执行 catch 代码块。

async/await演变过程：

回调函数（解决回调地狱） 👉promise （代码串行性）👉 generate (底层框架才会使有,小程序不支持,难理解) 👉 async/await (语法糖）

在底层实现上，async/await 结合了 Promise 的能力和生成器函数的特性，通过生成器函数的 yield 操作，实现了暂停和恢复异步操作。整体而言，async/await 使得异步代码的编写更加直观和易于理解，同时避免了回调地狱和代码串行性，提升了代码可读性和维护性。

关注