当前位置：首页 > news >正文

深入理解 async/await的原理

news 2026/4/27 7:36:41

前言

JavaScript 是单线程语言，异步编程是前端、Node.js 开发的核心基石。
从最初的回调函数，到Promise链式调用，再到 ES6Generator生成器，JavaScript 一直在迭代异步写法，只为解决同一个问题：让异步代码更易读、易维护、更贴近人类同步思维。

而 ES8 推出的async/await，是目前 JavaScript 异步编程最优、最主流、最优雅的终极解决方案。

本文从底层原理出发，结合Generator、Thunk 函数、co 库，带你彻底吃透async/await语法糖的前世今生。

一、异步编程的演进痛点

1. 回调函数

最早的异步方案，依靠回调嵌套实现串行异步逻辑，极易产生回调地狱：

代码层层嵌套，可读性极差
异常捕获困难
逻辑耦合严重，难以维护

2. Promise 方案

Promise解决了回调嵌套问题，通过.then()链式调用扁平化异步代码，但依然存在短板：

链式调用依旧是“异步写法”，无法像同步代码自上而下书写
多个串行异步时，链式代码依然冗余
无法直观实现同步写法的逻辑结构

开发者一直渴望一种写法：异步逻辑，同步书写。
于是，基于Generator的异步方案应运而生，最终演化出async/await。

二、核心预备知识

想要读懂async/await底层原理，必须先掌握三个核心概念：Generator生成器、Thunk 函数、co 函数库。

1. Generator 生成器（协程实现）

ES6 新增的Generator函数，是协程在 JavaScript 中的落地实现。
协程核心思想：多任务协作执行，函数可暂停、恢复，非常适合处理异步等待场景。

Generator 核心特性

函数声明：function* fn(){}，调用gen()不会立即执行，直接暂停
返回值：调用后返回一个Iterator迭代器对象
暂停标记：yield关键字，遇到yield暂停执行，返回阶段性结果
恢复执行：调用g.next()打破暂停，继续向下执行
参数传递：next()可传入参数，作为上一段异步任务的返回值
结束标记：遇到return代表函数执行完毕，done: true

简单示例

function*task(){yield"第一步异步";yield"第二步异步";return"执行完成";}constgen=task();console.log(gen.next());// { value: '第一步异步', done: false }console.log(gen.next());// { value: '第二步异步', done: false }console.log(gen.next());// { value: '执行完成', done: true }

Generator可以自由暂停、恢复，天然适配异步等待，但无法自动执行，必须手动不断调用next()。

2. Thunk 函数

Thunk 函数：将多参数、带回调的函数，改造为只接收回调的单参数函数。

单纯的 Thunk 函数没有实际意义，它的核心价值：
统一异步函数调用格式，配合 Generator 实现自动流转，将执行权交还生成器。

3. co 函数库

手动循环调用next()启动 Generator 过于繁琐，co库是Generator 自动执行器。

co 库使用规则

yield后仅支持：Thunk 函数 / Promise 对象
自动迭代执行 Generator，无需手动调用next()
执行完毕返回 Promise，支持.then()、异常捕获

借助 co 库 + Generator + Promise，我们已经可以写出“同步风格”的异步代码：

constco=require("co");// 模拟 Promise 异步读取文件functionreadFileWithPromise(path){returnPromise.resolve(`读取文件：${path}`);}// Generator + co 实现同步化异步co(function*(){try{constres1=yieldreadFileWithPromise("/etc/passwd");console.log(res1);constres2=yieldreadFileWithPromise("/etc/profile");console.log(res2);return"全部执行完成";}catch(err){console.error("异步错误：",err);}}).then((res)=>console.log("最终结果：",res));

三、读懂 async/await 本质

1. 核心定义

async/await是 Generator + Promise + co 自动执行器的官方语法糖。

async：标记函数为异步函数，底层封装 Generator
await：等价于yield，用于暂停异步执行，等待 Promise 结果
内置自动执行器：无需依赖 co 库，语言底层原生支持自动迭代
限制：仅支持 Promise、原始类型，不支持 Thunk 函数

2. Generator+co 与 async/await 对标

① 传统 co + Generator 写法

co(function*(){try{constcontent1=yieldreadFileWithPromise("/etc/passwd","utf8");console.log(content1);constcontent2=yieldreadFileWithPromise("/etc/profile","utf8");console.log(content2);return"done";}catch(err){console.error(err);return"fail";}});

② 现代 async/await 写法

asyncfunctionreadfile(){try{constcontent1=awaitreadFileWithPromise("/etc/passwd","utf8");console.log(content1);constcontent2=awaitreadFileWithPromise("/etc/profile","utf8");console.log(content2);return"done";}catch(err){throwerr;}}// async 函数默认返回 Promisereadfile().then((res)=>console.log(res)).catch((err)=>console.error(err));