学习链接

阮一峰：async

异步迭代和 generator（Symbol.asyncIterator 和 for await ... of）

异步操作-async

异步的角度来看，async 算是 generator 的语法糖。

async 函数对 Generator 函数的改进，体现在以下四点。

（1）内置执行器

  • Generator 函数的执行需要调用 next 方法，或者用 co 模块，也就是需要依靠执行器，才能真正执行，得到最后结果。

  • async 函数自带执行器。也就是说，async 函数的执行，与普通函数一模一样，只要一行。

（2）更好的语义

  • async 和 await，比起星号和 yield，语义更清楚了。

  • async 表示函数里有异步操作，await 表示紧跟在后面的表达式需要等待结果。

（3）更广的适用性

  • co 模块约定，yield 命令后面只能是 Thunk 函数或 Promise 对象。

  • 而 async 函数的 await 命令后面，可以是 Promise 对象和原始类型的值
    （数值、字符串和布尔值，但这时会自动转成立即 resolved 的 Promise 对象）

（4）返回值是 Promise

  • async 函数的返回值是 Promise 对象，这比 Generator 函数的返回值是 Iterator 对象方便多了。可以用 then 方法指定下一步的操作。

  • 进一步说，async 函数完全可以看作多个异步操作，包装成的一个 Promise 对象，而 await 命令就是内部 then 命令的语法糖。

语法

异步操作-async - 图1

  1. // 继发
  2. let foo = await getFoo();
  3. let bar = await getBar();
  4. // 执行完 getFoo() 才会执行 getBar()
  6. // 同时触发写法一
  7. let [foo, bar] = await Promise.all([getFoo(), getBar()]);
  9. // 同时触发写法二
  10. let fooPromise = getFoo();
  11. let barPromise = getBar();
  12. let foo = await fooPromise;
  13. let bar = await barPromise;

并发执行、继发执行

  1. function dbFuc(db) { //这里不需要 async
  2.     let docs = [{}, {}, {}];
  4.     // 可能得到错误结果
  5.     docs.forEach(async function (doc) {
  6.         await db.post(doc);
  7.     });
  8. }
  10. // 上面代码可能不会正常工作
  11. // 原因是这时三个db.post()操作将是并发执行，也就是同时执行，而不是继发执行
  13. // 改为 for 循环
  14. async function dbFuc(db) {
  15.     let docs = [{}, {}, {}];
  17.     for (let doc of docs) {
  18.         await db.post(doc);
  19.     }
  20. }
  22. // 用数组的 reduce() 方法
  23. async function dbFuc(db) {
  24.     let docs = [{}, {}, {}];
  26.     await docs.reduce(async (_, doc) => {
  27.         await _; 
  28.         // 等待 上一次 值为 undefined 状态为 fulfilled 的对象
  30.         await db.post(doc); // 异步操作
  32.         // return undefined
  33.     }, undefined);
  34. }

可保留运行堆栈

  1. const a = () => {
  2.     b().then(() => c());
  3. };

上面代码中，函数 a 内部运行了一个异步任务 b()。

当 b() 运行的时候，函数 a() 不会中断，而是继续执行。

等到 b() 运行结束，可能 a() 早就运行结束了，

b() 所在的上下文环境已经消失了。

如果 b() 或 c() 报错，错误堆栈将不包括 a()。

  1. const a = async () => {
  2.     await b();
  3.     c();
  4. };

上面代码中，b() 运行的时候，a() 是暂停执行，上下文环境都保存着。一旦 b() 或 c() 报错，错误堆栈将包括 a()。

async 实现原理

将 Generator 函数和自动执行器包装在同一个函数中。

  1. async function fn(args) {
  2.     // ...
  3. }
  5. // 等同于
  7. function fn(args) {
  8.     return spawn(function* () {
  9.         // ...
  10.     });
  11. }
  1. function spawn(genF) {
  2.     return new Promise((resolve, reject) => {
  3.         const gen = genF();
  5.         step(() => gen.next(undefined));
  7.         function step(nextF) {
  8.             let next;
  10.             try {
  11.                 next = nextF();
  12.             } catch (e) {
  13.                 return reject(e);
  14.             }
  16.             if (next.done) {
  17.                 return resolve(next.value);
  18.             }
  20.             Promise.resolve(next.value).then(
  21.                 v => { step(() => gen.next(v)); },
  22.                 e => { step(() => gen.throw(e)); }
  23.             );
  24.         }
  25.     });
  26. }