异步生成器

生成器 + 回调函数

通过使用生成器，可以实现同步顺序流程表达异步，异步生成器函数的行为与生成器函数类似：生成器函数返回一个具有next（）函数的对象，并且调用next（）执行生成器函数直到下一个yield。 区别在于异步迭代器的next（）函数返回一个promise。
使用回调的方式

  1. function foo(x, y, cb) {
  2.     ajax(
  3.         "http://some.url.1/?x=" + x + "&y=" + y, cb
  4.     );
  5. }
  6. foo(11, 31, function(err, text) {
  7.     if (err) {
  8.         console.error(err);
  9.     } else {
  10.         console.log(text);
  11.     }
  12. });

使用生成器改造回调

  1. function foo(x, y) {
  2.     ajax(
  3.         "http://some.url.1/?x=" + x + "&y=" + y,
  4.         function(err, data) {
  5.             if (err) {
  6.                 // 向*main()抛出一个错误
  7.                 it.throw( err );
  8.             } else {
  9.                 // 用收到的data恢复*main()
  10.                 it.next(data);
  11.             }
  12.         });
  13. }
  15. function* main() {
  16.     try {
  17.         var text = yield foo(11, 31);
  18.         console.log(text);
  19.     } catch (err) {
  20.         console.error(err);
  21.     }
  22. }
  23. var it = main();
  24. // 这里启动!
  25. it.next();

生成器 + promise

  • 最大问题是代码冗余，原来的任务被 Promise 包装了一下，不管什么操作，一眼看去都是一堆then，原来的语义变得很不清楚，代码不能很好地表示执行流程。
  • 首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。
  • 其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。
  • 第三，当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

    promise 的版本

    1. fetch('https://www.geekbang.org')
    2.     .then((response) => {
    3.         console.log(response)
    4.         return fetch('https://www.geekbang.org/test')
    5.     }).then((response) => {
    6.         console.log(response)
    7.     }).catch((error) => {
    8.         console.log(error)
    9.     })

    生成器 + promise 的版本

    相对于 promise 的版本有以下几个优点：
  1. then 里面就是异步的回调处理，执行流程清晰
  2. 可以控制开始，中途可以取消
  3. promise 发生的错误只能在promise.catch 中捕获，可以在生成中抛出错误
  4. 可以控制执行流程

问题：
异步生成器失去了Promise 的可信任性和可组合性

  1. //foo 函数
  2. function* foo() {
  3.     let response1 = yield fetch('https://www.geekbang.org')
  4.     console.log('response1')
  5.     console.log(response1)
  6.     let response2 = yield fetch('https://www.geekbang.org/test')
  7.     console.log('response2')
  8.     console.log(response2)
  9. }
  11. // 执行 foo 函数的代码
  12. let gen = foo()
  13. function getGenPromise(gen) {
  14.     return gen.next().value
  15. }
  16. getGenPromise(gen).then((response) => {
  17.     console.log('response1')
  18.     console.log(response)
  19.     return getGenPromise(gen)
  20. }).then((response) => {
  21.     console.log('response2')
  22.     console.log(response)
  23. })
  • 首先执行的是let gen = foo()，创建了 gen 协程。
  • 然后在父协程中通过执行 gen.next 把主线程的控制权交给 gen 协程。
  • gen 协程获取到主线程的控制权后，就调用 fetch 函数创建了一个 Promise 对象 response1，然后通过 yield 暂停 gen 协程的执行，并将 response1 返回给父协程。
  • 父协程恢复执行后，调用 response1.then 方法等待请求结果。
  • 等通过 fetch 发起的请求完成之后，会调用 then 中的回调函数，then 中的回调函数拿到结果之后，通过调用 gen.next 放弃主线程的控制权，将控制权交 gen 协程继续执行下个请求。

虽然 Generator 函数将异步操作表示得很简洁，但是流程管理却不方便（即何时执行第一阶段、何时执行第二阶段）。

自动流程异步生成器

把上面说的执行生成器代码封装成一个函数，并把这个执行生成器代码的函数称为执行器

封装

  1. function* foo() {
  2.     let response1 = yield fetch('https://www.geekbang.org')
  3.     console.log('response1')
  4.     console.log(response1)
  5.     let response2 = yield fetch('https://www.geekbang.org/test')
  6.     console.log('response2')
  7.     console.log(response2)
  8. }
  9. co(foo());
  1. function run(gen) {
  2.   var args = [].slice.call(arguments, 1);
  3.   var it;
  4.   // 在当前上下文中初始化生成器 
  5.   it = gen.apply(this, args);
  6.   // 返回一个promise用于生成器完成
  7.   return Promise.resolve()
  8.     .then(function handleNext(value) { // 对下一个yield出的值运行
  9.         var next = it.next(value);
  10.         return (function handleResult(next) { // 生成器运行完毕了吗?
  11.             if (next.done) {
  12.               return next.value;
  13.             }
  14.             // 否则继续运行
  15.             else {
  16.               return Promise.resolve(next.value).then(
  17.                 // 成功就恢复异步循环，把决议的值发回生成器 handleNext,
  18.                 // 如果value是被拒绝的 promise， 
  19.                 // 就把错误传回生成器进行出错处理 function handleErr(err) {
  20.                 return Promise.resolve(it.throw(err))
  21.                   .then(handleResult);
  22.               });
  23.           }
  24.         })(next);
  25.     });
  26. }
  28. function* main() { // ..
  29. }
  30. run(main);

thunk

传名调用

这就是 Thunk 函数的定义，它是“传名调用”的一种实现策略，用来替换某个表达式。

  1. function f(a, b) {
  2.   // ...
  3.   return a * b;
  4. }
  5. let x = 5;
  6. f(x + 5, 2);
  7. // 传值调用的话，在进入函数体之前就计算了 x + 5;
  8. // 等同于
  9. f(10, 2)
  10. // 传名调用的话，等同于
  11. // 这个临时函数就叫做 Thunk 函数
  12. // 用函数替换表达式，为了呀
  13. var thunk = function () {
  14.   return x + 5;
  15. };
  16. function f(thunk, b) {
  17.   // ...
  18.   return thunk() * b;
  19. }
  20. const x = 5;
  21. f(thunk, 2)
  22. // 真正执行到 thunk()的时候才计算 x+5;

js中的 thunk

指一个用于调用另外一个函数的函数

  1. // 正常版本的readFile（多参数版本）
  2. fs.readFile(fileName, callback);
  4. // Thunk版本的readFile（单参数版本）
  5. var Thunk = function (fileName) {
  6.   return function (callback) {
  7.     return fs.readFile(fileName, callback);
  8.   };
  9. };
  11. var readFileThunk = Thunk(fileName);
  12. readFileThunk(callback);

Thunk 函数转换器

  1. // ES5版本
  2. var Thunk = function(fn){
  3.   return function (){
  4.     var args = Array.prototype.slice.call(arguments);
  5.     return function (callback){
  6.       args.push(callback);
  7.       return fn.apply(this, args);
  8.     }
  9.   };
  10. };
  11. // ES6版本
  12. const Thunk = function(fn) {
  13.   return function (...args) {
  14.     return function (callback) {
  15.       return fn.call(this, ...args, callback);
  16.     }
  17.   };
  18. };

使用上面的转换器，生成fs.readFile的 Thunk 函数。

  1. var readFileThunk = Thunk(fs.readFile);
  2. readFileThunk(fileA)(callback);
  3. // 生产环境写法
  4. var thunkify = require('thunkify');
  5. var fs = require('fs');
  7. var read = thunkify(fs.readFile);
  8. read('package.json')(function(err, str){
  9.   // ...
  10. });

下面是另一个完整的例子。

  1. function f(a, cb) {
  2.   cb(a);
  3. }
  4. const ft = Thunk(f);
  5. ft(1)(console.log) // 1
  6. //或者
  7. ft(1)(function (data) {
  8.     console.log(data)
  9. })

基于 thunk 的Generator 函数的自动流程管理

Generator 函数可以自动执行。同步的情况

  1. function* gen() {
  2.   // ...
  3. }
  4. var g = gen();
  5. var res = g.next();
  6. while(!res.done){
  7.   console.log(res.value);
  8.   res = g.next();
  9. }

异步的情况

  1. var fs = require('fs');
  2. var thunkify = require('thunkify');
  3. var readFileThunk = thunkify(fs.readFile);
  4. var gen = function* (){
  5.   var r1 = yield readFileThunk('/etc/fstab');
  6.   console.log(r1.toString());
  7.   var r2 = yield readFileThunk('/etc/shells');
  8.   console.log(r2.toString());
  9. };
  11. var g = gen();
  13. var r1 = g.next();
  14. r1.value(function (err, data) {
  15.   if (err) throw err;
  16.   var r2 = g.next(data);
  17.   r2.value(function (err, data) {
  18.     if (err) throw err;
  19.     g.next(data);
  20.   });
  21. });

自动流程递归改写

  1. function run(fn) {
  2.   var gen = fn();
  3.   function next(err, data) {
  4.     var result = gen.next(data);
  5.     if (result.done) return;
  6.     result.value(next);
  7.   }
  8.   next();
  9. }
  10. var g = function* (){
  11.   var f1 = yield readFileThunk('fileA');
  12.   var f2 = yield readFileThunk('fileB');
  13.   // ...
  14.   var fn = yield readFileThunk('fileN');
  15. };
  16. run(g);

co 的流程管理

Generator 就是一个异步操作的容器。它的自动执行需要一种机制，当异步操作有了结果，能够自动交回执行权。
两种方法可以做到这一点。
（1）回调函数。将异步操作包装成 Thunk 函数，在回调函数里面交回执行权。
（2）Promise 对象。将异步操作包装成 Promise 对象，用then方法交回执行权。
co 模块其实就是将两种自动执行器（Thunk 函数和 Promise 对象），包装成一个模块。使用 co 的前提条件是，Generator 函数的yield命令后面，只能是 Thunk 函数或 Promise 对象。如果数组或对象的成员，全部都是 Promise 对象，也可以使用 co，详见后文的例子。

  1. var gen = function* () {
  2.   var f1 = yield readFile('/etc/fstab');
  3.   var f2 = yield readFile('/etc/shells');
  4.   console.log(f1.toString());
  5.   console.log(f2.toString());
  6. };
  7. // co 模块可以让你不用编写 Generator 函数的执行器。
  8. var co = require('co');
  9. co(gen).then(function (){
  10.   console.log('Generator 函数执行完成');
  11. });

基于 promise 对象自动执行

  1. var fs = require('fs');
  2. var readFile = function (fileName){
  3.   return new Promise(function (resolve, reject){
  4.     fs.readFile(fileName, function(error, data){
  5.       if (error) return reject(error);
  6.       resolve(data);
  7.     });
  8.   });
  9. };
  10. var gen = function* (){
  11.   var f1 = yield readFile('/etc/fstab');
  12.   var f2 = yield readFile('/etc/shells');
  13.   console.log(f1.toString());
  14.   console.log(f2.toString());
  15. };
  17. // 手动执行
  18. var g = gen();
  20. g.next().value.then(function(data){
  21.   g.next(data).value.then(function(data){
  22.     g.next(data);
  23.   });
  24. });
  1. function run(gen){
  2.   var g = gen();
  3.   function next(data){
  4.     var result = g.next(data);
  5.     if (result.done) return result.value;
  6.     result.value.then(function(data){
  7.       next(data);
  8.     });
  9.   }
  10.   next();
  11. }
  12. run(gen);

源码

co 就是上面那个自动执行器的扩展，它的源码只有几十行，非常简单。
首先，co 函数接受 Generator 函数作为参数，返回一个 Promise 对象。

  1. function co(gen) {
  2.   var ctx = this;
  3.   return new Promise(function(resolve, reject) {
  4.   });
  5. }

在返回的 Promise 对象里面，co 先检查参数gen是否为 Generator 函数。如果是，就执行该函数，得到一个内部指针对象；如果不是就返回，并将 Promise 对象的状态改为resolved。

  1. function co(gen) {
  2.   var ctx = this;
  3.   return new Promise(function(resolve, reject) {
  4.     if (typeof gen === 'function') gen = gen.call(ctx);
  5.     if (!gen || typeof gen.next !== 'function') return resolve(gen);
  6.   });
  7. }

接着，co 将 Generator 函数的内部指针对象的next方法，包装成onFulfilled函数。这主要是为了能够捕捉抛出的错误。

  1. function co(gen) {
  2.   var ctx = this;
  3.   return new Promise(function(resolve, reject) {
  4.     if (typeof gen === 'function') gen = gen.call(ctx);
  5.     if (!gen || typeof gen.next !== 'function') return resolve(gen);
  6.     onFulfilled();
  7.     function onFulfilled(res) {
  8.       var ret;
  9.       try {
  10.         ret = gen.next(res);
  11.       } catch (e) {
  12.         return reject(e);
  13.       }
  14.       next(ret);
  15.     }
  16.   });
  17. }

最后，就是关键的next函数，它会反复调用自身。

  1. function next(ret) {
  2.   if (ret.done) return resolve(ret.value);
  3.   var value = toPromise.call(ctx, ret.value);
  4.   if (value && isPromise(value)) return value.then(onFulfilled, onRejected);
  5.   return onRejected(
  6.     new TypeError(
  7.       'You may only yield a function, promise, generator, array, or object, '
  8.       + 'but the following object was passed: "'
  9.       + String(ret.value)
  10.       + '"'
  11.     )
  12.   );
  13. }

上面代码中，next函数的内部代码，一共只有四行命令。
第一行，检查当前是否为 Generator 函数的最后一步，如果是就返回。
第二行，确保每一步的返回值，是 Promise 对象。
第三行，使用then方法，为返回值加上回调函数，然后通过onFulfilled函数再次调用next函数。
第四行，在参数不符合要求的情况下（参数非 Thunk 函数和 Promise 对象），将 Promise 对象的状态改为rejected，从而终止执行。

处理并发的异步操作

co 支持并发的异步操作，即允许某些操作同时进行，等到它们全部完成，才进行下一步。
这时，要把并发的操作都放在数组或对象里面，跟在yield语句后面。

  1. // 数组的写法
  2. co(function* () {
  3.   var res = yield [
  4.     Promise.resolve(1),
  5.     Promise.resolve(2)
  6.   ];
  7.   console.log(res);
  8. }).catch(onerror);
  9. // 对象的写法
  10. co(function* () {
  11.   var res = yield {
  12.     1: Promise.resolve(1),
  13.     2: Promise.resolve(2),
  14.   };
  15.   console.log(res);
  16. }).catch(onerror);

下面是另一个例子。

  1. co(function* () {
  2.   var values = [n1, n2, n3];
  3.   yield values.map(somethingAsync);
  4. });
  5. function* somethingAsync(x) {
  6.   // do something async
  7.   return y
  8. }

上面的代码允许并发三个somethingAsync异步操作，等到它们全部完成，才会进行下一步。

Async/await

async

async 是一个通过异步执行并隐式返回 Promise 作为结果的函数。
async函数完全可以看作多个异步操作，包装成的一个 Promise 对象

async函数的状态变化

async函数返回的 Promise 对象，必须等到内部所有await命令后面的 Promise 对象执行完，才会发生状态改变，除非遇到return语句或者抛出错误。也就是说，只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数。
下面是一个例子。

  1. async function getTitle(url) {
  2.   let response = await new Promise((resolve) => {
  3.     setTimeout(resolve, 100);
  4.   })
  5.   let html = await new Promise((resolve) => {
  6.     setTimeout(resolve, 200);
  7.   });
  8.   return 'suncess'
  9. }
  10. getTitle('https://tc39.github.io/ecma262/').then(console.log)
  11. // "ECMAScript 2017 Language Specification"

上面代码中，函数getTitle内部有三个操作：抓取网页、取出文本、匹配页面标题。只有这三个操作全部完成，才会执行then方法里面的console.log。

async 可以当做 await 的参数

  1. async function timeout(ms) {
  2.   await new Promise((resolve) => {
  3.     setTimeout(resolve, ms);
  4.   });
  5. }
  7. async function asyncPrint(value, ms) {
  8.   await timeout(ms);
  9.   console.log(value);
  10. }
  12. asyncPrint('hello world', 50);

async 函数 return

async函数内部return语句返回的值，会成为then方法回调函数的参数。

  1. async function f() {
  2.   return 'hello world';
  3. }
  4. f().then(v => console.log(v))
  5. // "hello world"

上面代码中，函数f内部return命令返回的值，会被then方法回调函数接收到。

async 函数 throw

async函数内部抛出错误，会导致返回的 Promise 对象变为reject状态。抛出的错误对象会被catch方法回调函数接收到。

  1. async function f() {
  2.   throw new Error('出错了');
  3. }
  4. f().then(
  5.   v => console.log(v),
  6.   e => console.log(e)
  7. )
  8. // Error: 出错了

await

我觉得就是 yield
如果await命令后面是一个 Promise 对象，返回该对象的结果。
如果不是 Promise 对象，则默认创建一个 Promise 对象

await 后面的 promise 如果 reject

任何一个await语句后面的 Promise 对象变为reject状态，那么整个async函数都会中断执行。

  1. async function f() {
  2.   await Promise.reject('出错了');
  3.   await Promise.resolve('hello world'); // 不会执行
  4. }

await 做了什么

  1. async function foo() {
  2.     console.log(1)
  3.     let a = await 100
  4.     console.log(a)
  5.     console.log(2)
  6. }
  7. console.log(0)
  8. foo()
  9. console.log(3)

image.png
async/await 执行流程图

首先，执行console.log(0)这个语句，打印出来 0。
紧接着就是执行 foo 函数，由于 foo 函数是被 async 标记过的，所以当进入该函数的时候，JavaScript 引擎会保存当前的调用栈等信息，然后执行 foo 函数中的console.log(1)语句，并打印出 1。
接下来就执行到 foo 函数中的await 100这个语句了，这里是我们分析的重点，因为在执行await 100这个语句时，JavaScript 引擎在背后为我们默默做了太多的事情，那么下面我们就把这个语句拆开，来看看 JavaScript 到底都做了哪些事情。
当执行到await 100时，
首先会默认创建一个 Promise 对象，然后执行executor 函数，调用了 resolve 函数，JavaScript 引擎会将该任务提交给微任务队列JavaScript 引擎会暂停当前协程的执行，将主线程的控制权转交给父协程执行，同时会将 promise_ 对象返回给父协程。
接下来继续执行父协程的流程，这里我们执行console.log(3)，并打印出来 3。随后父协程将执行结束，在结束之前，会进入微任务的检查点，然后执行微任务队列，async 函数对这里做了封装，把promise.then 中的值传给 a，然后调用 next 方法。传resolve 的值
回到 foo 协程，继续执行

我修改的流程代码

  1. function fetch (data) {
  2.     return new Promise((resolve, reject) => {
  3.         console.log('fetch start')
  4.         resolve(data)
  5. })
  6. }
  7. async function foo() {
  8.     console.log(1)
  9.     let a = await fetch(100)
  11.     console.log(a)
  12.     let b = await fetch(a + 100)
  13.     console.log(b)
  14. }
  15. console.log(0)
  16. foo()
  17. console.log(3)


  1. 0
  2. 1
  3. fetch start
  4. 3
  5. 100
  6. fetch start
  7. 200


为什么引入 async/await

这种方式能够彻底告别执行器和生成器，实现更加直观简洁的代码，async/await 技术背后的秘密就是 Promise 和生成器应用，往低层说就是微任务和协程应用

使用 Async 和 await 改写生成器加 promise 的方式

  1. async function foo(){
  2.   try{
  3.     let response1 = await fetch('https://www.geekbang.org')
  4.     console.log('response1')
  5.     console.log(response1)
  6.     let response2 = await fetch('https://www.geekbang.org/test')
  7.     console.log('response2')
  8.     console.log(response2)
  9.   }catch(err) {
  10.        console.error(err)
  11.   }
  12. }
  13. foo()

异步函数使用async 关键字标识，内部用 await 表示异步操作
async 函数是什么？一句话，它就是 Generator 函数的语法糖。

  1. function foo(x, y) {
  2.     return request(
  3.         "http://some.url.1/?x=" + x + "&y=" + y);
  4. }
  5. // 这里也不需要声明为生成器函数
  6. async function main() {
  7.     try {
  8.       // 把 yield替换成await
  9.         var text = await foo(11, 31);
  10.         console.log(text);
  11.     } catch (err) {
  12.         console.error(err);
  13.     }
  14. }
  16. // 这里不需要 run 函数
  17. main();//

如果你 await 了一个 Promise，async 函数就会自动获知要做什么，它会暂停这个函数(就 像生成器一样)，直到 Promise 决议。

  1. const fs = require('fs');
  2. const readFile = function (fileName) {
  3.   return new Promise(function (resolve, reject) {
  4.     fs.readFile(fileName, function(error, data) {
  5.       if (error) return reject(error);
  6.       resolve(data);
  7.     });
  8.   });
  9. };
  10. const gen = function* () {
  11.   const f1 = yield readFile('/etc/fstab');
  12.   const f2 = yield readFile('/etc/shells');
  13.   console.log(f1.toString());
  14.   console.log(f2.toString());
  15. };

上面代码的函数gen可以写成async函数，就是下面这样。

  1. const asyncReadFile = async function () {
  2.   const f1 = await readFile('/etc/fstab');
  3.   const f2 = await readFile('/etc/shells');
  4.   console.log(f1.toString());
  5.   console.log(f2.toString());
  6. };

一比较就会发现，async函数就是将 Generator 函数的星号（*）替换成async，将yield替换成await，仅此而已。

async函数对 Generator 函数的改进，体现在以下四点。
（1）内置执行器。
Generator 函数的执行必须靠执行器，所以才有了co模块，而async函数自带执行器。也就是说，async函数的执行，与普通函数一模一样，只要一行。

  1. asyncReadFile();

上面的代码调用了asyncReadFile函数，然后它就会自动执行，输出最后结果。这完全不像 Generator 函数，需要调用next方法，或者用co模块，才能真正执行，得到最后结果。
（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命令的语法糖。

使用

  1. function timeout(ms) {
  2.   return new Promise((resolve) => {
  3.     setTimeout(resolve, ms);
  4.   });
  5. }
  6. async function asyncPrint(value, ms) {
  7.   await timeout(ms);
  8.   console.log(value);
  9. }
  10. asyncPrint('hello world', 50);

上面代码指定 50 毫秒以后，输出hello world。
由于async函数返回的是 Promise 对象，可以作为await命令的参数。所以，上面的例子也可以写成下面的形式。

  1. async function timeout(ms) {
  2.   await new Promise((resolve) => {
  3.     setTimeout(resolve, ms);
  4.   });
  5. }
  6. async function asyncPrint(value, ms) {
  7.   await timeout(ms);
  8.   console.log(value);
  9. }
  10. asyncPrint('hello world', 50);

错误处理

async 函数的实现原理

async 函数的实现原理，就是将 Generator 函数和自动执行器，包装在一个函数里。

  1. async function fn(args) {
  2.   // ...
  3. }
  4. // 等同于
  5. function fn(args) {
  6.   return spawn(function* () {
  7.     // ...
  8.   });
  9. }

所有的async函数都可以写成上面的第二种形式，其中的spawn函数就是自动执行器。
下面给出spawn函数的实现，基本就是前文自动执行器的翻版。

  1. function spawn(genF) {
  2.   return new Promise(function(resolve, reject) {
  3.     const gen = genF();
  4.     function step(nextF) {
  5.       let next;
  6.       try {
  7.         next = nextF();
  8.       } catch(e) {
  9.         return reject(e);
  10.       }
  11.       if(next.done) {
  12.         return resolve(next.value);
  13.       }
  14.       Promise.resolve(next.value).then(function(v) {
  15.         step(function() { return gen.next(v); });
  16.       }, function(e) {
  17.         step(function() { return gen.throw(e); });
  18.       });
  19.     }
  20.     step(function() { return gen.next(undefined); });
  21.   });
  22. }

习题

  1. async function foo() {
  2.     console.log('foo')
  3. }
  4. async function bar() {
  5.     console.log('bar start')
  6.     await foo()
  7.     console.log('bar end')
  8. }
  9. console.log('script start')
  10. setTimeout(function () {
  11.     console.log('setTimeout')
  12. }, 0)
  13. bar();
  14. new Promise(function (resolve) {
  15.     console.log('promise executor')
  16.     resolve();
  17. }).then(function () {
  18.     console.log('promise then')
  19. })
  20. console.log('script end')
  1. script start
  2. bar start
  3. promise executor
  4. script end
  5. foo // 错误！foo 在 bar start 后面
  6. bar end
  7. promise then
  8. setTimeout

实例：

继发操作

  1. async function logInOrder(urls) {
  2.   // 并发读取远程URL
  3.   const textPromises = urls.map(async url => {
  4.     const response = await fetch(url);
  5.     return response.text();
  6.   });
  7.   // 按次序输出
  8.   for (const textPromise of textPromises) {
  9.     console.log(await textPromise);
  10.   }
  11. }

问题是所有远程操作都是继发。只有前一个 URL 返回结果，才会去读取下一个 URL，这样做效率很差，非常浪费时间。我们需要的是并发发出远程请求。

按顺序完成并发异步操作

实际开发中，经常遇到一组异步操作，需要按照顺序完成。比如，依次远程读取一组 URL，然后按照读取的顺序输出结果。
Promise 的写法如下。

  1. function logInOrder(urls) {
  2.   // 远程读取所有URL
  3.   const textPromises = urls.map(url => {
  4.     return fetch(url).then(response => response.text());
  5.   });
  6.   // 按次序输出
  7.   textPromises.reduce((chain, textPromise) => {
  8.     return chain.then(() => textPromise)
  9.       .then(text => console.log(text));
  10.   }, Promise.resolve());
  11. }

上面代码使用fetch方法，同时远程读取一组 URL。每个fetch操作都返回一个 Promise 对象，放入textPromises数组。然后，reduce方法依次处理每个 Promise 对象，然后使用then，将所有 Promise 对象连起来，因此就可以依次输出结果。
这种写法不太直观，可读性比较差。下面是 async 函数实现。

  1. async function logInOrder(urls) {
  2.   // 并发读取远程URL
  3.   const textPromises = urls.map(async url => {
  4.     const response = await fetch(url);
  5.     return response.text();
  6.   });
  7.   // 按次序输出
  8.   for (const textPromise of textPromises) {
  9.     console.log(await textPromise);
  10.   }
  11. }

上面代码中，虽然map方法的参数是async函数，但它是并发执行的，因为只有async函数内部是继发执行，外部不受影响。后面的for..of循环内部使用了await，因此实现了按顺序输出。

处理 Stream

Node 提供 Stream 模式读写数据，特点是一次只处理数据的一部分，数据分成一块块依次处理，就好像“数据流”一样。这对于处理大规模数据非常有利。Stream 模式使用 EventEmitter API，会释放三个事件。

  • data事件：下一块数据块已经准备好了。
  • end事件：整个“数据流”处理完了。
  • error事件：发生错误。

使用Promise.race()函数，可以判断这三个事件之中哪一个最先发生，只有当data事件最先发生时，才进入下一个数据块的处理。从而，我们可以通过一个while循环，完成所有数据的读取。

  1. const co = require('co');
  2. const fs = require('fs');
  3. const stream = fs.createReadStream('./les_miserables.txt');
  4. let valjeanCount = 0;
  5. co(function*() {
  6.   while(true) {
  7.     const res = yield Promise.race([
  8.       new Promise(resolve => stream.once('data', resolve)),
  9.       new Promise(resolve => stream.once('end', resolve)),
  10.       new Promise((resolve, reject) => stream.once('error', reject))
  11.     ]);
  12.     if (!res) {
  13.       break;
  14.     }
  15.     stream.removeAllListeners('data');
  16.     stream.removeAllListeners('end');
  17.     stream.removeAllListeners('error');
  18.     valjeanCount += (res.toString().match(/valjean/ig) || []).length;
  19.   }
  20.   console.log('count:', valjeanCount); // count: 1120
  21. });

上面代码采用 Stream 模式读取《悲惨世界》的文本文件，对于每个数据块都使用stream.once方法，在data、end、error三个事件上添加一次性回调函数。变量res只有在data事件发生时才有值，然后累加每个数据块之中valjean这个词出现的次数。