引见

写过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的功用，而且语义越发清楚。