JavaScript async/await 底层原理：从无栈协程到 V8 实现

1
async function fetchData() {
2
  try {
3
    const response = await fetch('/api/user')
4
    const user = await response.json()
5
    const postsResponse = await fetch(`/api/posts/${user.id}`)
6
    const posts = await postsResponse.json()
7
    console.log(posts)
8
  } catch (error) {
9
    console.error(error)
10
  }
11
}

1
function fetchData() {
2
  return fetch('/api/user')
3
    .then(response => response.json())
4
    .then(user => {
5
      return fetch(`/api/posts/${user.id}`)
6
    })
7
    .then(response => response.json())
8
    .then(posts => {
9
      console.log(posts)
10
    })
11
    .catch(error => {
12
      console.error(error)
13
    })
14
}

1
// 嵌套回调 - 回调地狱
2
getData(function(a) {
3
  getMoreData(a, function(b) {
4
    getMoreData(b, function(c) {
5
      getMoreData(c, function(d) {
6
        // ...层层嵌套
7
      })
8
    })
9
  })
10
})

1
// jQuery 1.5+ 的 AJAX 请求返回 Promise 对象
2
$.ajax('/api/user')
3
  .done(function(user) {
4
    console.log('Success:', user)
5
  })
6
  .fail(function(error) {
7
    console.error('Error:', error)
8
  })
9
  .always(function() {
10
    console.log('Complete')
11
  })
12

13
// 并行处理多个请求
14
$.when(getData1(), getData2(), getData3())
15
  .done(function(data1, data2, data3) {
16
    console.log('All done:', data1, data2, data3)
17
  })
18
  .fail(function() {
19
    console.error('One or more failed')
20
  })

1
// 基础用法
2
const promise = new Promise<string>((resolve, reject) => {
3
  setTimeout(() => {
4
    if (Math.random() > 0.5) {
5
      resolve('Success!')
6
    } else {
7
      reject(new Error('Failed!'))
8
    }
9
  }, 1000)
10
})
11

12
promise
13
  .then(result => console.log(result))
14
  .catch(error => console.error(error))
15

16
// 链式调用
17
getData()
18
  .then(a => getMoreData(a))
19
  .then(b => getMoreData(b))
20
  .then(c => getMoreData(c))
21
  .catch(error => {
22
    // 统一错误处理
23
  })
24

25
// 并行处理
26
Promise.all([getData1(), getData2(), getData3()])
27
  .then(([data1, data2, data3]) => {
28
    console.log('All done:', data1, data2, data3)
29
  })
30
  .catch(error => {
31
    console.error('One failed:', error)
32
  })

1
function* simpleGenerator() {
2
  console.log('Step 1')
3
  yield 1
4
  console.log('Step 2')
5
  yield 2
6
  console.log('Step 3')
7
  return 3
8
}
9

10
const gen = simpleGenerator()
11
console.log(gen.next()) // { value: 1, done: false }, 输出: Step 1
12
console.log(gen.next()) // { value: 2, done: false }, 输出: Step 2
13
console.log(gen.next()) // { value: 3, done: true },  输出: Step 3

1
function* fetchUser() {
2
  const response = yield fetch('/api/user')
3
  const user = yield response.json()
4
  const posts = yield fetch(`/api/posts/${user.id}`)
5
  return posts
6
}
7

8
// 需要一个执行器来自动运行
9
function run(generator) {
10
  const iterator = generator()
11

12
  function step(result) {
13
    if (result.done) return Promise.resolve(result.value)
14

15
    return Promise.resolve(result.value)
16
      .then(data => step(iterator.next(data)))
17
      .catch(error => step(iterator.throw(error)))
18
  }
19

20
  return step(iterator.next())
21
}
22

23
// 使用
24
run(fetchUser).then(posts => {
25
  console.log(posts)
26
})

1
const co = require('co')
2

3
co(function* () {
4
  const user = yield User.findById(1)
5
  const posts = yield Post.findByUser(user.id)
6
  return { user, posts }
7
}).then(result => {
8
  console.log(result)
9
}).catch(err => {
10
  console.error(err)
11
})

1
const Koa = require('koa')
2
const app = new Koa()
3

4
app.use(function* (next) {
5
  console.log('→ 1')
6
  yield next  // 暂停，把控制权交给下一个中间件
7
  console.log('← 1')
8
})
9

10
app.use(function* (next) {
11
  console.log('→ 2')
12
  this.body = 'Hello'
13
  console.log('← 2')
14
})
15

16
// 输出：→ 1 → 2 ← 2 ← 1

1
async function fetchUser() {
2
  const response = await fetch('/api/user')
3
  const user = await response.json()
4
  return user
5
}
6

7
// 使用
8
fetchUser().then(user => {
9
  console.log(user)
10
})

1
// Generator + co (2013-2016)
2
co(function* () {
3
  const user = yield User.findById(1)
4
  const posts = yield Post.findByUser(user.id)
5
  return { user, posts }
6
})
7

8
// async/await (2017+)
9
async function main() {
10
  const user = await User.findById(1)
11
  const posts = await Post.findByUser(user.id)
12
  return { user, posts }
13
}

1
package main
2

3
import (
4
    "fmt"
5
    "time"
6
)
7

8
func loadTextures() {
9
    fmt.Println("加载纹理...")
10
    time.Sleep(2 * time.Second)
11
    fmt.Println("纹理完成")
12
}
13

14
func loadSounds() {
15
    fmt.Println("加载音效...")
16
    time.Sleep(1 * time.Second)
17
    fmt.Println("音效完成")
18
}
19

20
func loadMaps() {
21
    fmt.Println("加载地图...")
22
    time.Sleep(1 * time.Second)
23
    fmt.Println("地图完成")
24
}
25

26
func main() {
27
    // 关键点：go 关键字可以在任意函数调用处创建新协程
28
    // 有栈协程可以在任意函数暂停，每个 goroutine 有独立栈
29
    go loadTextures()  // 立即返回，并行执行
30
    go loadSounds()    // 立即返回，并行执行
31
    go loadMaps()      // 立即返回，并行执行
32

33
    time.Sleep(4 * time.Second) // 等待所有任务完成
34
    fmt.Println("全部完成！")
35
}

1
加载地图...
2
加载纹理...
3
加载音效...
4
音效完成
5
地图完成
6
纹理完成
7
全部完成！

1
// 辅助函数
2
function delay(ms: number): Promise<void> {
3
  return new Promise(resolve => setTimeout(resolve, ms))
4
}
5

6
async function loadTextures() {
7
  console.log('加载纹理...')
8
  await delay(2000)
9
  console.log('纹理完成')
10
}
11

12
async function loadSounds() {
13
  console.log('加载音效...')
14
  await delay(1000)
15
  console.log('音效完成')
16
}
17

18
async function loadMaps() {
19
  console.log('加载地图...')
20
  await delay(1000)
21
  console.log('地图完成')
22
}
23

24
async function loadAllResources() {
25
  // 关键点：只能在 await 处暂停，编译器转换为状态机
26
  // 无栈协程没有独立栈，内存开销极小
27
  await Promise.all([
28
    loadTextures(),
29
    loadSounds(),
30
    loadMaps()
31
  ])
32
  console.log('全部完成！')
33
}
34

35
loadAllResources()

1
加载纹理...
2
加载音效...
3
加载地图...
4
音效完成
5
地图完成
6
纹理完成
7
全部完成！

1
async function foo() {
2
  // 状态 0：从函数开始到第一个 await
3
  const a = 1;
4
  const result = await bar();   // 暂停点
5

6
  // 状态 1：从 await 恢复到函数结束
7
  const b = 2;
8
  return a + b + result.length;
9
}
10

11
function bar() {
12
  return Promise.resolve('done')
13
}
14

15
foo().then(res => console.log(res))  // 输出 3

1
// JSGeneratorObject 基类（定义在 src/objects/js-generator.tq）
2
extern class JSGeneratorObject extends JSObject {
3
  function: JSFunction;                 // 指向函数本身
4
  context: Context;                     // 闭包上下文
5
  receiver: JSAny;                      // this 绑定
6
  input_or_debug_pos: Object;           // 输入值或调试信息
7
  resume_mode: Smi;                     // 恢复模式(kNext/kThrow)
8
  continuation: Smi;                    // 字节码偏移量(初始为 kGeneratorExecuting)，标记恢复时跳转的位置（对应上面例子的状态 0、1）
9
  parameters_and_registers: FixedArray; // 保存局部变量和寄存器
10
}
11

12
// JSAsyncFunctionObject 继承自 JSGeneratorObject
13
extern class JSAsyncFunctionObject extends JSGeneratorObject {
14
  promise: JSPromise;           // 关联的 Promise 对象
15
  await_resolve_closure: JSAny; // 复用优化：resolve 回调闭包
16
  await_reject_closure: JSAny;  // 复用优化：reject 回调闭包
17
}

1
// 伪代码：V8 内部自动做的事情
2
const asyncFuncObj = foo() // 创建状态机对象
3
const promiseFromAwait = /* 执行到 await，拿到 bar() 的 Promise */
4
promiseFromAwait.then(
5
  (value) => resume(asyncFuncObj, value),  // Promise 成功了，恢复状态机
6
  (error) => throw(asyncFuncObj, error)    // Promise 失败了，向状态机抛错
7
)

1
[ 你写的代码 ]
2
     |
3
     | 调用 foo()
4
     ↓
5
[ V8 创建 JSAsyncFunctionObject (继承自 JSGeneratorObject) ]
6
     |
7
     | continuation = 0 (初始状态：状态 0)
8
     | 创建关联的 JSPromise（用于 foo() 的返回值）
9
     | 推入调用栈执行
10
     ↓
11
[ 执行 foo 内同步代码（状态 0） ]
12
     |
13
     | const a = 1：a 变量赋值并存入寄存器
14
     | 调用 bar() 拿到 Promise P（状态为 fulfilled，值是 'done'）
15
     ↓
16
[ 遇到 await 关键字 ]
17
     |
18
     | 1. 调用 AsyncFunctionAwait builtin
19
     |    - 内部通过 Await() 函数调用 PerformPromiseThen
20
     |    - 因为 Promise P 已经是 fulfilled 状态
21
     |    - 立即将 onFulfilled 回调包装为 PromiseReactionJob
22
     |    - 推入 MicrotaskQueue（此时 foo 仍在调用栈）
23
     | 2. SuspendGenerator 字节码
24
     |    - 保存现场：寄存器 -> parameters_and_registers (堆)，保存 a=1
25
     |    - 标记断点：continuation = 1（下次从状态 1 开始）
26
     |    - 退栈：foo 从物理调用栈消失
27
     ↓
28
[ 继续执行主线程剩余同步代码 ]
29
     |
30
     | 调用栈彻底清空
31
     ↓
32
[ 事件循环 (Event Loop) 接管 ]
33
     |
34
     | 检查 MicrotaskQueue
35
     ↓
36
[ 执行 MicrotaskQueue::RunMicrotasks() ]
37
     |
38
     | 从队列中取出 PromiseReactionJob
39
     ↓
40
[ 触发内部回调（V8 层面） ]
41
     |
42
     | 调用恢复函数（类似 generator.next('done') 的底层实现）
43
     | 传入 'done' 作为 await 的返回值（存储到累加器寄存器）
44
     | 进入 C++ Runtime
45
     ↓
46
[ 调用 JSGeneratorObject::Resume() ]
47
     |
48
     | 1. 检查状态：continuation = 1（有效，表示从 await 恢复）
49
     | 2. 重建战场：parameters_and_registers -> 寄存器，恢复 a=1
50
     | 3. 准备输入：累加器中已有 'done'（await 的返回值）
51
     | 4. 重新入栈：foo 重新出现在调用栈
52
     ↓
53
[ 解释器执行 ResumeGenerator 字节码 ]
54
     |
55
     | Switch(continuation=1)：跳转到 await 之后的代码位置
56
     | 累加器中的值（'done'）被赋给 result 变量
57
     ↓
58
[ 恢复执行 foo 剩余代码（状态 1） ]
59
     |
60
     | const b = 2：b 变量赋值
61
     | return a + b：计算 1 + 2 = 3
62
     | 状态机执行完成，continuation = -1（已关闭）
63
     | foo 再次退栈
64
     | JSPromise 状态变为 fulfilled，值为 3
65
     ↓
66
[ foo().then() 的回调被触发 ]
67
     |
68
     | 输出 3
69
     ↓
70
[ 流程结束 ]

1
async function fetchUser(id: number) {
2
  const response = await fetch(`/api/user/${id}`)
3
  const user = await response.json()
4
  return user
5
}
6

7
// 使用
8
fetchUser(1).then(user => console.log(user))

1
function fetchUser(id) {
2
  return new Promise((resolve, reject) => {
3
    let state = 0
4
    let user
5
    let response
6

7
    function step(result) {
8
      try {
9
        // 检查错误
10
        if (result && result.error) {
11
          state = -1
12
          reject(result.error)
13
          return
14
        }
15

16
        switch (state) {
17
          case 0:
18
            state = 1
19
            Promise.resolve(fetch(`/api/user/${id}`))
20
              .then(data => step({ value: data }))
21
              .catch(error => step({ error }))
22
            break
23

24
          case 1:
25
            response = result.value
26
            state = 2
27
            Promise.resolve(response.json())
28
              .then(data => step({ value: data }))
29
              .catch(error => step({ error }))
30
            break
31

32
          case 2:
33
            user = result.value
34
            state = -1
35
            resolve(user)
36
            break
37
        }
38
      } catch (error) {
39
        state = -1
40
        reject(error)
41
      }
42
    }
43

44
    step()  // 初始调用，result 为 undefined 但 case 0 不使用它
45
  })
46
}

1
async def fetch_data():
2
    await asyncio.sleep(1)
3
    return {"data": "value"}

1
public async Task<User> GetUserAsync(int id)
2
{
3
    var user = await _userRepository.FindAsync(id);
4
    var posts = await _postRepository.GetByUserIdAsync(id);
5
    user.Posts = posts;
6
    return user;
7
}

1
async fn fetch_user(id: u32) -> User {
2
    let user = db::find_user(id).await?;
3
    let posts = db::find_posts(user.id).await?;
4
    User { user, posts }
5
}

1
// Task 是自定义的返回类型（需库提供或自行实现）
2
Task my_coroutine() {
3
    std::cout << "Step 1\n";
4
    co_await std::suspend_always{};
5
    std::cout << "Step 2\n";
6
}

1
// 不必要的 async，不要这样做
2
async function getValue() {
3
  return 42
4
}
5

6
// 直接返回，这是更合适的做法
7
function getValue() {
8
  return 42
9
}
10

11
// 串行 await，通常这是不合理的，没有数据依赖的多个异步串行，非常慢
12
async function fetchMultiple() {
13
  const a = await fetch(url1)
14
  const b = await fetch(url2)
15
  const c = await fetch(url3)
16
  return [a, b, c]
17
}
18

19
// 并行 await，通常这样做是更合理的，多个无相互依赖的任务并发执行
20
async function fetchMultiple() {
21
  const [a, b, c] = await Promise.all([
22
    fetch(url1),
23
    fetch(url2),
24
    fetch(url3)
25
  ])
26
  return [a, b, c]
27
}