ES6学习15（异步操作和Async函数）

异步编程对JavaScript语言太重要。Javascript语言的执行环境是“单线程”的，如果没有异步编程，根本没法用，非卡死不可。
ES6诞生以前，异步编程的方法，大概有下面四种。

• 回调函数
• 事件监听
• 发布/订阅
• Promise 对象

ES6将JavaScript异步编程带入了一个全新的阶段，ES7的Async函数更是提出了异步编程的终极解决方案。

基本概念

所谓”异步”，简单说就是一个任务分成两段，先执行第一段，然后转而执行其他任务，等做好了准备，再回过头执行第二段。

比如，有一个任务是读取文件进行处理，任务的第一段是向操作系统发出请求，要求读取文件。然后，程序执行其他任务，等到操作系统返回文件，再接着执行任务的第二段（处理文件）。这种不连续的执行，就叫做异步。

回调函数

读取文件进行处理，是这样写的：

fs.readFile('/etc/passwd', function (err, data) {
  if (err) throw err;
  console.log(data);
});

为什么Node.js约定，回调函数的第一个参数，必须是错误对象err（如果没有错误，该参数就是null）？原因是执行分成两段，在这两段之间抛出的错误，程序无法捕捉，只能当作参数，传入第二段。

Promise

回调函数本身并没有问题，它的问题出现在多个回调函数嵌套。这个是个老问题了。
Promise就是为了解决这个问题而提出的。它不是新的语法功能，而是一种新的写法，允许将回调函数的嵌套，改成链式调用。采用Promise，连续读取多个文件，写法如下。

var readFile = require('fs-readfile-promise');

readFile(fileA)
.then(function(data){
  console.log(data.toString());
})
.then(function(){
  return readFile(fileB);
})
.then(function(data){
  console.log(data.toString());
})
.catch(function(err) {
  console.log(err);
});

Promise 的写法只是回调函数的改进，使用then方法以后，异步任务的两段执行看得更清楚了，除此以外，并无新意。

Promise 的最大问题是代码冗余，原来的任务被Promise 包装了一下，不管什么操作，一眼看去都是一堆 then，原来的语义变得很不清楚。

Generator

协程

协程有点像函数，又有点像线程。它的运行流程大致如下。

• 第一步，协程A开始执行
• 第二步，协程A执行到一半，进入暂停，执行权转移到协程B
• 第三步，（一段时间后）协程B交还执行权
• 第四步，协程A恢复执行。

Generator就是ES6中对协程的实现，比如读取文件：

function *asyncJob() {
  // ...其他代码
  //首次调用next运行到这里，开始执行readFile函数，这个函数暂停执行
  //在readFile中，完成读取后再调用这个Generator的next并将返回的结果传入
  //这个结果就会作为yield的语句的返回值赋给f，然后继续执行到下一个yield
  var f = yield readFile(fileA);
  // ...其他代码
}

异步任务的封装

var fetch = require('node-fetch');
function* gen(){
  var url = 'https://api.github.com/users/github';
  var result = yield fetch(url);
  console.log(result.bio);
}
var g = gen();
var result = g.next();
result.value.then(function(data){
  return data.json();
}).then(function(data){
  g.next(data);
});

Thunk函数

在JavaScript语言中，Thunk函数替换多参数函数，将其替换成单参数的版本，且只接受回调函数作为参数。
任何函数，只要参数有回调函数，就能写成Thunk函数的形式。下面是一个简单的Thunk函数转换器。

var fs = require('fs');
var Thunk = function(fn) {
  return function (...args) {
    return function (callback) {
      return fn.call(this, ...args, callback);
    }
  };
};
var readFileThunk = Thunk(fs.readFile);
readFileThunk("./import.js")(function(err,data){
    console.log(data);
});

有一个Thunkify模块，考虑的更加周到，基本思想是一样的：

function thunkify(fn){
  return function(){
    var args = new Array(arguments.length);
    var ctx = this;
    for(var i = 0; i < args.length; ++i) {
      args[i] = arguments[i];
    }
    return function(done){
      var called;
      args.push(function(){
        //这里利用闭包保存了一个called变量，来标志一个回调函数是否已经被执行过
        if (called) return;
        called = true;
        done.apply(null, arguments);
      });
      try {
        fn.apply(ctx, args);
      } catch (err) {
        done(err);
      }
    }
  }
};
var read = thunkify(fs.readFile);
read('./import.js')(function(err, str){
  console.log(str);
});

这个called变量可以保证callback只执行一次，如果在异步过程中多次调用callback也只执行一次：

function f(a, b, callback){
  var sum = a + b;
  callback(sum);
  callback(sum);
}
var ft = thunkify(f);
var print = console.log.bind(console);
ft(1, 2)(print);
// 3

Generator 函数的流程管理

你可能会问， Thunk函数有什么用？回答是以前确实没什么用，但是ES6有了Generator函数，Thunk函数现在可以用于Generator函数的自动流程管理。
假设我们要依次读取两个文件，我们的Generator可以这样写：

var fs = require('fs');
var readFile = thunkify(fs.readFile);
var gen = function* (){
  var r1 = yield readFile('./import.js');
  console.log(r1.toString());
  var r2 = yield readFile('./import.js');
  console.log(r2.toString());
};

手动执行时：

var g = gen();
var r1 = g.next();
r1.value(function(err, data){
  if (err) throw err;
  var r2 = g.next(data);
  r2.value(function(err, data){
    if (err) throw err;
    g.next(data);
  });
});

Thunk函数的自动流程管理

Generator函数的执行过程，其实是将同一个回调函数，反复传入next方法的value属性。这使得我们可以用递归来自动完成这个过程。

function run(fn) {
  //执行传入的Generator，获得遍历器对象
  var gen = fn();
  //要传入Trunk函数的回调函数
  //在这里就相当于是readFile('./import.js')(next)
  //首先要手动执行一下next(),此时调用gen.next(data)时无论data是什么值Generator都会忽略的
  //这时result/value获得到的就是一个readFile('./import.js'),也就是一个trunk函数
  //再把next传进去，就可以开始递归执行了
  function next(err, data) {
    var result = gen.next(data);
    if (result.done) return;
    result.value(next);
  }
  next();
}
run(gen);

基于Promise的自动流程管理

var fs = require('fs');
//先把一个异步操作封装为一个Promise对象
var readFile = function (fileName){
  return new Promise(function (resolve, reject){
    fs.readFile(fileName, function(error, data){
      if (error) return reject(error);
      resolve(data);
    });
  });
};
var gen = function* (){
  //每次执行next返回的就是一个Promise对象
  var f1 = yield readFile('./import.js');
  console.log(f1.toString());
  var f2 = yield readFile('./import.js');
  console.log(f2.toString());
};

手动执行：

var g = gen();
g.next().value.then(function(data){
  g.next(data).value.then(function(data){
    g.next(data);
  });
});

手动执行其实就是用then方法，层层添加回调函数。理解了这一点，就可以写出一个自动执行器，基本原理和Trunk函数的相同：

var run = function(gen) {
  var g = gen();
  function next(data){
    var result = g.next(data);
    if (result.done) return result.value;
    result.value.then(function(data){
      next(data);
    });
  }
  next();
}
run(gen);

co模块

co模块是著名程序员TJ Holowaychuk于2013年6月发布的一个小工具，用于Generator函数的自动执行。
对于一个Generator，不需要再编写Generator的执行器：

co(gen);

co函数返回一个Promise对象，因此可以用then方法添加回调函数。

co(gen).then(function (){
  console.log('Generator 函数执行完成');
});

使用co的前提条件是，Generator函数的yield命令后面，只能是Thunk函数或Promise对象。
co支持并发的异步操作，即允许某些操作同时进行，等到它们全部完成，才进行下一步。
这时，要把并发的操作都放在数组或对象里面，跟在yield语句后面。

// 数组的写法
co(function* () {
  var res = yield [
    Promise.resolve(1),
    Promise.resolve(2)
  ];
  console.log(res);
}).catch(onerror);

async函数

ES7提供了async函数，使得异步操作变得更加方便。async函数是什么？一句话，async函数就是Generator函数的语法糖。
定义：

var asyncReadFile = async function (){
  var f1 = await readFile('/etc/fstab');
  var f2 = await readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};

执行：

var result = asyncReadFile();

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

1. 内置执行器。Generator函数的执行必须靠执行器，所以才有了co模块，而async函数自带执行器。也就是说，async函数的执行，与普通函数一模一样，只要一行，然后它就会自动执行，输出最后结果。这完全不像Generator函数，需要调用next方法，或者用co模块，才能得到真正执行，得到最后结果。
2. 更好的语义。async和await，比起星号和yield，语义更清楚了。async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果。
3. 更广的适用性。 co模块约定，yield命令后面只能是Thunk函数或Promise对象，而async函数的await命令后面，可以是Promise对象和原始类型的值（数值、字符串和布尔值，但这时等同于同步操作）。
4. 返回值是Promise。async函数的返回值是Promise对象，这比Generator函数的返回值是Iterator对象方便多了。你可以用then方法指定下一步的操作。

语法

async函数返回一个Promise对象。
async函数内部return语句返回的值，会成为then方法回调函数的参数。
async函数内部抛出错误，会导致返回的Promise对象变为reject状态。抛出的错误对象会被catch方法回调函数接收到。

async function f() {
  throw new Error('出错了');
  return 'hello world';
}

f().then(
  v => console.log(v),
  e => console.log(e)
)
// Error: 出错了

async函数返回的Promise对象，必须等到内部所有await命令的Promise对象执行完，才会发生状态改变。只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数。
正常情况下，await命令后面是一个Promise对象。如果不是，会被转成一个立即resolve的Promise对象。await命令后面的Promise对象如果变为reject状态，则reject的参数会被catch方法的回调函数接收到。
只要一个await语句后面的Promise变为reject，那么整个async函数都会中断执行。
如果await后面的异步操作出错，那么等同于async函数返回的Promise对象被reject。

async 函数的用法

async函数返回一个Promise对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到触发的异步操作完成，再接着执行函数体内后面的语句。

function timeout(data, ms) {
  return new Promise((resolve) => {
    setTimeout(function(){
        resolve(data);
    }, ms);
  });
}
async function asyncPrint(value, ms) {
  //timeout会返回一个promise对象
  //await会等待这个对象中的resolve方法执行
  //并用其参数当做自己的返回值
  //值得注意的是await命令后面的Promise对象
  //运行结果可能是rejected
  //所以最好把await命令放在try...catch代码块中
  //或者使用catch方法
  var a = await timeout(value,ms)
  .catch(function (err) {
    console.log(err);
  });
  console.log('a:'+a);
  return 'async over'
}
asyncPrint('hello world', 5000).then(v => console.log(v));
console.log('after async');
//after async
//a:hello world
//async over

注意事项

//多个await命令后面的异步操作，如果不存在继发关系，最好让它们同时触发
//这样就不好，一个执行完再执行一个
//假设getFoo()和getBar()会返回Promise对象
let foo = await getFoo();
let bar = await getBar();
//可以这样
let [foo, bar] = await Promise.all([getFoo(), getBar()]);
//或者这样
//由于在Promise生成时里面的异步代码立刻开始执行
//所以前两行执行完两个异步操作就都已经开始了
//接下来在用await来等待这两个异步完成操作
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;

异步遍历器

目前，有一个提案，为异步操作提供原生的遍历器接口，即value和done这两个属性都是异步产生，这称为”异步遍历器“（Async Iterator）。

异步遍历的接口

异步遍历器的最大的语法特点，就是调用遍历器的next方法，返回的是一个Promise对象。
对象的异步遍历器接口，部署在Symbol.asyncIterator属性上面。

const asyncIterable = createAsyncIterable(['a', 'b']);
const asyncIterator = asyncIterable[Symbol.asyncIterator]();

asyncIterator.next()
.then(iterResult1 => {
  console.log(iterResult1); // { value: 'a', done: false }
  return asyncIterator.next();
}).then(iterResult2 => {
  console.log(iterResult2); // { value: 'b', done: false }
  return asyncIterator.next();
}).then(iterResult3 => {
  console.log(iterResult3); // { value: undefined, done: true }
});

上面代码中，异步遍历器其实返回了两次值。第一次调用的时候，返回一个Promise对象；等到Promise对象resolve了，再返回一个表示当前数据成员信息的对象。这就是说，异步遍历器与同步遍历器最终行为是一致的，只是会先返回Promise对象，作为中介。
由于异步遍历器的next方法，返回的是一个Promise对象。因此，可以把它放在await命令后面，await会等待这个Promise对象执行完，取它传到resolve函数里的值，就不用上面的then方法了。

async function f() {
  const asyncIterable = createAsyncIterable(['a', 'b']);
  const asyncIterator = asyncIterable[Symbol.asyncIterator]();
  console.log(await asyncIterator.next());
  // { value: 'a', done: false }
  console.log(await asyncIterator.next());
  // { value: 'b', done: false }
  console.log(await asyncIterator.next());
  // { value: undefined, done: true }
}

注意，异步遍历器的next方法是可以连续调用的，不必等到上一步产生的Promise对象resolve以后再调用。这种情况下，next方法会累积起来，自动按照每一步的顺序运行下去。下面是一个例子，把所有的next方法放在Promise.all方法里面。

const asyncGenObj = createAsyncIterable(['a', 'b']);
const [{value: v1}, {value: v2}] = await Promise.all([
  asyncGenObj.next(), asyncGenObj.next()
]);

console.log(v1, v2); // a b

for await…of

async function () {
  try {
    for await (const x of createAsyncIterable(['a', 'b'])) {
      console.log(x);
    }
  } catch (e) {
    console.error(e);
  }
}

上面代码中，createAsyncIterable()返回一个异步遍历器，for…of循环自动调用这个遍历器的next方法，会得到一个Promise对象。await用来处理这个Promise对象，一旦resolve，就把得到的值（x）传入for…of的循环体。
如果next方法返回的Promise对象被reject，那么就要用try…catch捕捉。

异步Generator函数

异步Generator函数的作用，是返回一个异步遍历器对象。
在语法上，异步Generator函数就是async函数与Generator函数的结合。

async function* readLines(path) {
  let file = await fileOpen(path);
  try {
    while (!file.EOF) {
      yield await file.readLine();
    }
  } finally {
    await file.close();
  }
}
for await (const line of readLines(filePath)) {
  console.log(line);
}

上面代码中，异步操作前面使用await关键字标明，即await后面的操作，应该返回Promise对象。凡是使用yield关键字的地方，就是next方法的停下来的地方，它后面的表达式的值（即await file.readLine()的值），会作为next()返回对象的value属性，这一点是于同步Generator函数一致的。
yield命令依然是立刻返回的，但是返回的是一个Promise对象。

async function* asyncGenerator() {
  console.log('Start');
  const result = await doSomethingAsync(); // (A)
  yield 'Result: '+ result; // (B)
  console.log('Done');
}

上面代码中，调用next方法以后，会在B处暂停执行，yield命令立刻返回一个Promise对象。这个Promise对象不同于A处await命令后面的那个Promise对象。主要有两点不同，一是A处的Promise对象resolve以后产生的值，会放入result变量；二是B处的Promise对象resolve以后产生的值，是表达式’Result： ’ + result的值；三是A处的Promise对象一定先于B处的Promise对象resolve。
如果异步Generator函数抛出错误，会被Promise对象reject，然后抛出的错误被catch方法捕获。

async function* asyncGenerator() {
  throw new Error('Problem!');
}

asyncGenerator()
.next()
.catch(err => console.log(err)); // Error: Problem!

注意，普通的async函数返回的是一个Promise对象，而异步Generator函数返回的是一个异步Iterator对象。async函数和异步Generator函数，是封装异步操作的两种方法，都用来达到同一种目的。区别在于，前者自带执行器，后者通过for await…of执行，或者自己编写执行器。
下面就是一个异步Generator函数的执行器。

async function takeAsync(asyncIterable, count=Infinity) {
  const result = [];
  const iterator = asyncIterable[Symbol.asyncIterator]();
  while (result.length < count) {
    const {value,done} = await iterator.next();
    if (done) break;
    result.push(value);
  }
  return result;
}

yield* 语句

yield*语句也可以跟一个异步遍历器。

async function* gen1() {
  yield 'a';
  yield 'b';
  return 2;
}

async function* gen2() {
  const result = yield* gen1();
}

上面代码中，gen2函数里面的result变量，最后的值是2。
与同步Generator函数一样，for await…of循环会展开yield*。

(async function () {
  for await (const x of gen2()) {
    console.log(x);
  }
})();
// a
// b