如何实现一个简单的Async/Await? - Ocean Han

818 字

4 分钟

如何实现一个简单的Async/Await?

2026-03-11

无标签

原理#

Async/Await 本质上是Generator函数 + 自动执行器的语法糖。Generator可以暂停/恢复执行，自动执行器用来进行异步流程控制：

Generator 的 yield 相当于 await

自动执行器负责等待 Promise 解析后恢复 Generator 执行

错误处理通过 generator.throw() 传递给 Generator 内部

步骤#

1. asyncSimulate函数：
- 接收一个 Generator 函数作为参数
- 返回一个 Promise，该Promise解析为Generator 函数的最终返回值
1. 自动执行器:
- 获取Generator返回的迭代器对象generator
- 递归处理 generator.next(), 检查结果是否完成
- 处理错误情况，使用generator.throw()将异常抛回Generator内部并reject外部Promise

实现#

1
function asyncSimulate(generatorFunc) {
2
  return new Promise((resolve, reject) => {
3
    const generator = generatorFunc();
4

5
    function run(result) {
6
      if (result.done) {
7
        resolve(result.value);
8
        return;
9
      }
10

11
      const value = Promise.resolve(result.value);
12

13
      value.then(
14
        (res) => {
15
          run(generator.next(res));
16
        },
17
        (err) => {
18
          try {
19
            run(generator.throw(err));
20
          } catch (e) {
21
            reject(e);
22
          }
23
        });
24
    }
25

26
    try {
27
      run(generator.next());
28
    } catch (e) {
29
      reject(e);
30
    }
31
  });
32
}

使用示例#

简单异步操作#

1
function* basicExample() {
2
  console.log('开始执行');
3

4
  // yield 在这里相当于 await
5
  const result = yield new Promise((resolve) => {
6
    setTimeout(() => {
7
      resolve('异步操作完成');
8
    }, 1000);
9
  });
10

11
  console.log('结果:', result);
12
  return '函数结束';
13
}
14

15
asyncSimulate(basicExample)
16
  .then(res => console.log('最终返回值:', res))
17
  .catch(err => console.error('错误:', err));
18

19
// output:
20
// 开始执行
21
// (1秒后)
22
// 结果: 异步操作完成
23
// 最终返回值: 函数结束

多个异步任务顺序执行#

1
function* sequentialAsync() {
2
  console.log('开始顺序执行多个异步操作');
3

4
  // 第一个异步操作
5
  const task1 = yield new Promise(resolve =>
6
    setTimeout(() => resolve('任务1完成'), 500)
7
  );
8
  console.log(task1);
9

10
  // 第二个异步操作
11
  const task2 = yield new Promise(resolve =>
12
    setTimeout(() => resolve('任务2完成'), 300)
13
  );
14
  console.log(task2);
15

16
  // 第三个异步操作
17
  const task3 = yield new Promise(resolve =>
18
    setTimeout(() => resolve('任务3完成'), 200)
19
  );
20
  console.log(task3);
21

22
  return '所有任务完成';
23
}
24

25
asyncSimulate(sequentialAsync).then(res => console.log('🎉', res));
26

27
// output:
28
// 开始顺序执行多个异步操作
29
// (0.5秒后)
30
// 任务1完成
31
// (0.3秒后)
32
// 任务2完成
33
// (0.2秒后)
34
// 任务3完成
35
// 🎉 所有任务完成

并行异步操作#

1
function* parallelAsync() {
2
  console.log('开始执行并行异步操作');
3

4
  const [res1, res2, res3] = yield Promise.all([
5
    new Promise(resolve => setTimeout(() => resolve('任务A'), 500)),
6
    new Promise(resolve => setTimeout(() => resolve('任务B'), 1000)),
7
    new Promise(resolve => setTimeout(() => resolve('任务C'), 400))
8
  ]);
9
  console.log('并行结果1:', res1);
10
  console.log('并行结果2:', res2);
11
  console.log('并行结果3:', res3);
12

13
  return '所有并行任务完成';
14
}
15

16
asyncSimulate(parallelAsync)
17
  .then(res => console.log('✨', res));
18

19
// output:
20
// 开始并行执行异步操作
21
// (1秒后，最长的时间)
22
// 并行结果1: 任务A
23
// 并行结果2: 任务B
24
// 并行结果3: 任务C
25
// ✨ 所有并行任务完成

链式异步操作#

1
function* chainAsync() {
2
  console.log('开始链式操作');
3

4
  let value = 10;
5

6
  value = yield new Promise(resolve =>
7
    setTimeout(() => resolve(value * 2), 300)
8
  );
9

10
  value = yield new Promise(resolve =>
11
    setTimeout(() => resolve(value + 4), 300)
12
  );
13

14
  value = yield new Promise(resolve =>
15
    setTimeout(() => resolve(value / 3), 300)
16
  );
17

18
  return value;
19
}
20
asyncSimulate(chainAsync).then(res => console.log('最终计算结果:', res));
21

22
// output:
23
// 8

错误处理#

1
function* errorHandlingExample() {
2
  console.log('开始执行');
3

4
  try {
5
    const result = yield new Promise((resolve, reject) => {
6
      setTimeout(() => reject(new Error('异步操作失败')), 500);
7
    });
8
    console.log('这里不会执行');
9
  } catch (error) {
10
    console.log('捕获到错误:', error.message);
11
    return '错误已处理';
12
  }
13
}
14
asyncSimulate(errorHandlingExample)
15
  .then(res => console.log('返回值:', res))
16
  .catch(err => console.error('外部错误:', err));
17

18
// output:
19
// 开始执行
20
// (0.5秒后)
21
// 捕获到错误: 异步操作失败
22
// 返回值: 错误已处理

如何实现一个简单的Async/Await?

https://blog.oceanh.top/posts/frontend/async和await是如何实现的/

作者

Ocean Han

发布于

2026-03-11

许可协议

CC BY-NC-SA 4.0

最后修改时间

2026-03-12 02:03:22

简单异步操作

多个异步任务顺序执行

并行异步操作

链式异步操作