那些年在异步代码上所做的努力

介绍

写过JS代码的同学应该都知道，JS是单线程的，当出现异步逻辑时，就需要使用一些技巧来实现。最常见的方法就是使用回调方法。

回调方法

比如我们要实现一个功能：1s后运行逻辑，再过3s运行另外一段逻辑。使用回调方法可以这样写：

// 方法一 ，嵌套回调
// 模拟异步逻辑
function delay(time, callback) {
  setTimeout(function() {
    callback(time);
  }, time);
}

// 过1000ms后输出日志，再过3000ms后输出日志。
delay(1000, function(time1) {
  console.log('%s ms后运行', time1);
  delay(3000, function(time2) {
    console.log('%s ms后运行', time2);
  });
});

运行上面的代码，可以得到我们想要的结果：1s后输出了日志，再过3s又输出日志。但是如果逻辑复杂下去，会出现很深的回调方法嵌套问题，使得代码不可维护。为了使异步代码更清晰，就出现了Promise。

Promise

还是拿上面的例子来实现：

// 方法二 promise
function sleep(time) {
  return function() {
    return new Promise((resolve) => setTimeout(resolve, time));
  };
}

sleep(1000)().then(function() {
  console.log('1000ms后运行');
}).then(sleep(3000)).then(function() {
  console.log('3000ms后运行');
});

运行代码后，还是可以得到和使用回调方法实现时一样的效果。分析Promise实现的代码，可以发现，它对嵌套回调进行了改进，将原先横向发展的代码，改成了纵向发展，但是并没有解决本质问题。使用Promise的代码，异步逻辑变成了一堆then方法，语义还是不够清晰。那么有没有更好的写法呢？
在ES6中，提出了generator方法，可以做到使用同步代码来实现异步功能。下面我们来重点介绍下generator。

generator

generator介绍

generator是ES6中新提出的函数类型，最大的特点就是函数的执行可以被控制。
举一个最简单的generator例子：

function *idMarker() {
  var i = 1;
  while(true) {
    yield i++;
  }
}

var ids = idMarker();
ids.next().value; // 1
ids.next().value; // 2
ids.next().value; // 3

上面的例子中，当运行了generator函数idMarker()后，函数体并没有开始运行，而是直接返回了一个迭代器ids。当迭代器运行next()后，会返回第一次运行到yield或者return时的返回值以格式{value:1,done:false}进行返回。其中value就是yield后面的值，done表示当前迭代器还没有结束迭代。从上面的代码可以看出，generator函数的运行过程可以在外边被控制，也就是说使用generator可以做到以下功能的实现：

运行A逻辑;
通过yield语句，暂停A，并开始异步逻辑B；
等B运行完成，再继续运行A；

generator实现异步逻辑

从上面的例子可以看出，使用generator可以解决Promise的问题，代码如下：

// 方法三 generator
function sleep(time) {
  return new Promise((resolve) => setTimeout(function() {
    resolve(time);
  }, time));
}

function run(gen) {
  return new Promise(function(resolve, reject) {
    gen = gen();
    onFulfilled();
    function onFulfilled(res) {
      var ret = gen.next(res);
      next(ret);
    }
    function next(ret) {
      if (ret.done) return resolve(ret.value);
      ret.value.then(onFulfilled);
    }
  });
}

function *syncFn() {
  var d1 = yield sleep(1000);
  console.log('%s ms后运行', d1);
  var d2 = yield sleep(3000);
  console.log('%s ms后运行', d2);
}

run(syncFn);

下面我们来分析下上面代码的逻辑：
首先运行run(syncFn);， 会运行到gen = gen();。这个时候gen变成了generator的迭代器。
通过运行onFulfilled中的gen.next(res)，代码开始运行syncFn中的sleep(1000)。此时，gen.next(res)会返回syncFn中yield获得的值，即sleep方法返回的promise对象，并在next方法中对该promise设置了then(onFulfilled)。 也就是说，当sleep(1000)返回的promise运行结束后，会运行then中的onFulfilled。而onFulfilled会继续运行syncFn的迭代器。这样子，虽然syncFn中的异步逻辑，就会逐步执行了。

co

co是一个使用generator和yield来解决异步嵌套的工具库。它的实现类似于上面例子中的run方法。向co传入一个generator方法后，就会开始逐步执行其中的异步逻辑。
举个例子，我们需要读取三个文件并将文件内容依次打印出来。使用co的写法就是：

var fs = require('fs');
var co = require('co');

function readFile(path) {
  return function (cb) {
    fs.readFile(path, {encoding: 'utf8'}, cb);
  };
}

co(function* () {
  var dataA = yield readFile('a.js');
  console.log(dataA);
  var dataB = yield readFile('b.js');
  console.log(dataB);
  var dataC = yield readFile('c.js');
  console.log(dataC);
}).catch(function (err) {
  console.log(err);
});

yield 与 yield*

yield语句还可以使用yield*，两则存在细微的差别。举个例子：

// 数组
function* GenFunc() {
  yield [1, 2];
  yield* [3, 4];
  yield "56";
  yield* "78";
}
var gen = GenFunc();
console.log(gen.next().value); // [1, 2]
console.log(gen.next().value); // 3
console.log(gen.next().value); // 4

// generator函数
function* Gen1() {
  yield 2;
  yield 3;
}
function* Gen2() {
  yield 1;
  yield* Gen1();
  yield 4;
}
var g2 = Gen2();
console.log(g2.next().value); // 1
console.log(g2.next().value); // 2
console.log(g2.next().value); // 3
console.log(g2.next().value); // 4

// 对象
function* GenFunc() {
  yield {a: '1', b: '2'};
  yield* {a: '1', b: '2'};
}
var gen = GenFunc();
console.log(gen.next()); // { value: { a: '1', b: '2' }, done: false }
console.log(gen.next()); // TypeError: undefined is not a function

从上面几个例子可以看出，yield 与 yield 的区别在于：yield 只是返回右侧对象的值，而 yield 则将函数委托（delegate）到另一个生成器（ Generator）或可迭代的对象（如字符串、数组和类数组 arguments，以及 ES6 中的 Map、Set 等）。也就是说，yield*会逐个调用右侧可迭代对象的next方法。

async await

上面讲完了如何使用generator来解决异步代码的问题，可以看出，使用generator后，异步逻辑的代码基本和同步逻辑的代码差不多了。但是，generator的运行需要co来支持，所有最后又出现了async和await。async和await其实就是generator的语法糖。举个例子：

// generator
function *syncFn() {
  var d1 = yield sleep(1000);
  console.log('%s ms后运行', d1);
  var d2 = yield sleep(3000);
  console.log('%s ms后运行', d2);
}

上面的代码使用async改写就是：

// async
function async syncFn() {
  var d1 = await sleep(1000);
  console.log('%s ms后运行', d1);
  var d2 = await sleep(3000);
  console.log('%s ms后运行', d2);
}

可以看出，async的语法其实就是将generator中的*替换成async，将yield替换成await。

async和await的优势

有了generator，为什么还要提出async呢？因为async有以下几点优势：

1. async的语义更清晰

2. async方法自带执行器，运行时和普通方法一样。而generator的运行依赖于co

3. await后面的方法可以是任意方法。而co现在了yield后面的方法必须是Promise

总结

总结一下异步代码的发展过程：

1. 【回调函数】最基本的解决方法，将异步结束函数以参数的方式传递到异步函数中，也就是使用回调函数的方式来实现异步逻辑。

2. 【Promise】为了解决回调函数的横向发展问题，定义了Promise。

3. 【generator】Promise虽然解决了异步代码横向发展问题，可是使用Promise语义不够清晰，代码会呈现纵向发展趋势，所以，ES6中出现了generator函数来解决异步代码问题。

4. 【async】generator函数基本上解决了异步代码问题，但是generator函数的运行却被外部控制着。最后提出了async，实现了generator + co的功能，而且语义更加清晰。