写在前面

有一个风趣的题目：

为何Node.js商定回调函数的第一个参数必需是毛病对象err(假如没有毛病，该参数就是null)?

原因是实行回调函数对应的异步操纵，它的实行分红两段，这两段之间抛出的毛病递次没法捕捉，所以只能作为参数传入第二段。人人晓得，JavaScript只需一个线程，假如没有异步编辑，庞杂的递次基础没法运用。在ES6降生之前，异步编程的体式格局大概有下面四种：

• 回调函数

• 事宜监听

• 宣布/定阅

• Promise对象

ES6将JavaScript异步编程带入了一个全新的阶段，ES7中的async函数更是给出了异步编程的终究解决方案。下面将详细解说异步编程的道理和值得注重的处所，待我细细道来～

异步编程的演化

基础明白

所谓异步，简朴地说就是一个使命分红两段，先实行第一段，然后转而实行其他使命，等做好预备再回过甚实行第二段。

举个例子
读取一个文件举行处置惩罚，使命的第一段是向操纵系统发出请求，请求读取文件。然后，递次实行其他使命，比及操纵系统返回文件，再接着实行使命的第二段（处置惩罚文件）。这类不一连的实行，就叫做异步。

响应地，一连的实行就叫作同步。由因而一连实行，不能插进去其他使命，所以操纵系统从硬盘读取文件的这段时候，递次只能干等着。

回调函数

所谓回调函数，就是把使命的第二段零丁写在一个函数中，比及从新实行该使命时直接挪用这个函数。其英文名字 callback 直译过来就是 “从新挪用”的意义。

拿上面的例子讲，读取文件操纵是如许的：

fs.readFile(fileA, (err, data) => {
    if (err) throw err;
    console.log(data)
})

fs.readFile(fileB, (err, data) => {
    if (err) throw err;
    console.log(data)
})

注重：上面两段代码相互是异步的，虽然最先实行的递次是从上到下，然则第二段并不会比及第一段终了才实行，而是并发实行。

那末题目来了，假如想fileB比及fileA读取胜利后再最先实行应当怎样处置惩罚呢？最简朴的要领是经由过程 回调嵌套：

fs.readFile(fileA, (err, data) => {
    if (err) throw err;
    console.log(data)
    
    fs.readFile(fileB, (_err, _data) => { 
        if (_err) throw err;
        console.log(_data)
    })
})

这类体式格局我只能容忍个位数字的嵌套，而且它使得代码横向发展，实在是丑的一笔，次数多了根本是没法看。试想万一要同步实行100个异步操纵呢？疯掉算了吧！有无更好的要领呢？

运用Promise

要廓清一点，Promise的观点并非ES6新出的，而是ES6整合了一套新的写法。一样继承上面的例子，运用Promise代码就变成如许了：

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

readFile(fileA)
.then((data)=>{console.log(data)})
.then(()=>{return readFile(fileB)})
.then((data)=>{console.log(data)})
// ... 读取n次
.catch((err)=>{console.log(err)})

注重：上面代码运用了Node封装好的Promise版本的readFile函数，它的道理实在就是返回一个Promise对象，咱也简朴地写一个：

var fs = require('fs');

var readFile = function(path) {
    return new Promise((resolve, reject) => {
        fs.readFile(path, (err, data) => {
            if (err) reject(err)
            resolve(data)
        })
    })
}

module.export = readFile

然则，Promise的写法只是回调函数的革新，运用then()以后，异步使命的两段实行看得更清楚，除此之外并没有新意。撇开长处，Promise的最大题目就是代码冗余，本来的使命被Promise包装一下，不管什么操纵，一眼看上去都是一堆then()，底本的语意变得很不清楚。

把酒问苍天，MD另有更好的要领吗？

运用Generator

在引入generator之前，先引见一下什么叫 协程

“携程在手，说走就走”。哈哈，别殽杂了， “协程” 非 “携程“

协程

所谓 “协程” ，就是多个线程相互协作，完成异步使命。协程有点像函数，又有点像线程。其运转流程大抵以下：

• 第一步： 协程A最先实行

• 第二步：协程A实行到一半，停息，实行权转移到协程B

• 第三步：一段时候后，协程B交还实行权

• 第四步：协程A恢复实行

function asyncJob() {
    // ... 其他代码
    var f = yield readFile(fileA);
    // ... 其他代码 
}

上面的asyncJob()就是一个协程，它的玄妙就在于个中的yield敕令。它示意实行到此处实行权交给其他协程，换而言之，yield就是异步两个阶段的分界线。

协程碰到yield敕令就停息，比及实行权返回，再从停息的处所继承今后实行。它的最大长处就是代码的写法异常像同步操纵，假如撤除 yield敕令，几乎如出一辙。

Generator函数

Generator函数是协程在ES6中的完成，最大的特征就是能够交出函数的实行权（即停息实行）。悉数Generator函数就是一个封装的异步使命，或许说就是异步使命的容器。

function* gen(x) {
    var y = yield x + 2;
    return y;
} 

var g = gen(1);
g.next() // { value: 3, done: false }
g.next() // { value: undefined, done: true }

上面的代码中，挪用Generator函数，会返回一个内部指针（即遍历器）g，这是Generator函数不同于一般函数的另一个处所，即实行它不会返回效果，返回的是指针对象。挪用指针g的next()要领，会挪动内部指针（即实行异步使命的第一段），指向第一个碰到的yield语句。

换而言之，next()要领的作用是分阶段实行Generator函数。每次挪用next()要领，会返回一个对象，示意当前阶段的信息（value属性和done属性）。value属性是yield语句背面表达式的值，示意当前阶段的值；done属性是一个布尔值，示意Generator函数是不是实行终了，即是不是另有一个阶段。

Generator函数的数据交换和毛病处置惩罚

Generator函数能够停息实行和恢复实行，这是它封装异步使命的根本原因。除此之外，它另有两个特征，使它能够作为异步编程的解决方案：函数体表里的数据交换和毛病处置惩罚机制。

next()要领返回值的value属性，是Generator函数向外输出的数据；next()要领还能够吸收参数，向Generator函数体内输入数据。

function* gen(x) {
    var y = yield x + 2;
    return y;
} 

var g = gen(1);
g.next()      // { value: 3, done: false }
g.next(2)     // { value: 2, done: true }

上面的代码中，第一个next()要领的value属性，返回表达式x+2的值（3）。第二个next()要领带有参数2，这个参数能够传入Generator函数，作为上个阶段异步使命的返回效果，被函数体内的变量y吸收，因而这一步的value属性返回的就是2（变量y的值）。

Generator函数内部还能够布置毛病处置惩罚代码，捕捉函数体外抛出的毛病。

function* gen(x) {
    try {
        var y = yield x + 2
    } catch(e) {
        console.log(e)
    }
    return y
}

var g = gen(1);
g.next();
g.throw('失足了');

上面代码的末了一行，Generator函数体外，运用指针对象的throw要领抛出的毛病，能够被函数体内的try...catch 代码块捕捉。这意味着，失足的代码与处置惩罚毛病的代码，完成了时候和空间上的星散，这关于异步编程无疑是很主要的。

异步使命的封装

下面看看怎样运用Generator函数，实行一个实在的异步使命。

var fetch = require('node-fetch')

function* gen() {
    var url = 'https://api.github.com/usrs/github';
    var result = yield fetch(url);
    console.log(result.bio);
} 

上面代码中，Generator函数封装了一个异步操纵，该操纵先读取一个长途接口，然后从JSON花样的数据剖析信息。就像前面说过的，这段代码异常像同步操纵。除了加上yield敕令。

实行这段代码的要领以下：

var g = gen();
var result = g.next();

result.value.then(function(data) {
    return data.json()
}).then(function(data) {
    g.next(data)
});

上面代码中，起首实行Generator函数，猎取遍历器对象。然后运用next()要领，实行异步使命的第一阶段。因为Fetch模块返回的是一个Promise对象，因而须要用then()要领挪用下一个next()要领。

能够看到，虽然Generator函数将异步操纵示意得很简约，然则流程治理却不轻易（即适宜实行第一阶段，什么时候实行第二阶段）

大Boss上台之 async函数

所谓async函数，实际上是Generator函数的语法糖。

继承我们异步读取文件的例子，运用Generator完成

var fs = require('fs');

var readFile = (path) => {
    return new Promise((resolve, reject) => {
        fs.readFile(path, (err, data) => {
            if (err) reject(err)
            resolve(data)
        })
    })
}

var gen = function* () {
    var f1 = yield readFile(fileA);
    var f2 = yield readFile(fileB);
    console.log(f1.toString());
    console.log(f2.toString());
}

写成async函数，就是下面如许：

var asyncReadFile = async function() {
    var f1 = await readFile(fileA);
    var f2 = await readFile(fileB);
    console.log(f1.toString())
    console.log(f2.toString())
}

发明了吧，async函数就是将Generator函数的*替代成了async，将yield替代成await，除此之外，还对 Generator做了以下四点革新：

（1）内置实行器。Generator函数的实行比方靠实行器，所以才有了co模块等异步实行器，而async函数是自带实行器的。也就是说：async函数的实行，与一般函数如出一辙，只需一行：

var result = asyncReadFile();

（2）上面的代码挪用了asyncReadFile()，就会自动实行，输出末了效果。这完整不像Generator函数，须要挪用next()要领，或许运用co模块，才获得真正实行，从而获得终究效果。

（3）更好的语义。async和await比起星号和yield，语义更清楚。async示意函数里有异步操纵，await示意紧跟在背面的表达式须要守候效果。

（4）更广的适用性。async函数的await敕令背面能够是Promise对象和原始范例的值（数值、字符串和布尔值，而这是等同于同步操纵）。

（5）返回值是Promise，这比Generator函数返回的是Iterator对象轻易多了。你能够用then()指定下一步操纵。

进一步说，async函数完整能够看做由多个异步操纵包装成的一个Promise对象，而await敕令就是内部then()敕令的语法糖。

完成道理

async函数的完成就是将Generator函数和自动实行器包装在一个函数中。以下代码：

async function fn(args) {
    // ...
}

// 等同于 
function fn(args) {
  return spawn(function*() {
    // ...
  })
}
// 自动实行器
function spawn(genF) {
  return new Promise(function(resolve, reject) {
    var gen = genF();
    function step(nextF) {
      try {
        var next = nextF()
      } catch(e) {
        return reject(e)
      }
      if (next.done) {
        return resolve(next.value)
      }
      Promise.resolve(next.value).then(function(v) {
        step(function() { return gen.next(v) })
      },function(e) {
        step(function() { return gen.throw(e) })
      })
    }
    step(function() { return gen.next(undefined) })
  })
}

async函数用法

（1）async函数返回一个Promise对象，能够是then()要领增加回调函数。
（2）当函数实行时，一旦碰到await()就会先返回，比及触发的异步操纵完成，再接着实行函数体内背面的语句。

下面是一个耽误输出效果的例子：

function timeout(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms)
  })
}

async function asyncPrint(value, ms) {
  await timeout(ms)
  console.log(value)
}

// 耽误500ms后输出 "Hello World!"
asyncPrint('Hello World!', 500)

注重事项

（1）await敕令背面的Promise对象，运转效果多是reject，所以最好把await敕令放在try...catch代码块中。

（2）await敕令只能用在async函数中，用在一般函数中会报错。

（3）ES6将await增加为保留字。假如运用这个词作为标识符，在ES5中是正当的，然则ES6会抛出 SyntaxError（语法毛病）。

终究一战

“倚天不出谁与争锋”，上面引见了一大堆，末了照样让我们经由过程一个例子来看看 async 函数和Promise、Generator究竟谁才是真正的老大吧！

需求：假定某个DOM元素上布置了一系列的动画，前一个动画终了才最先后一个。假如当中又一个动画失足就不再往下实行，返回上一个胜利实行动画的返回值。

用Promise完成

function chainAnimationsPromise(ele, animations) {

  // 变量ret用来保留上一个动画的返回值 
  var ret = null;
  
  // 新建一个空的Promise 
  var p = Promise.resolve();

  // 运用then要领增加一切动画 
  for (var anim in animations) {
    p = p.then(function(val) {
      ret = val;
      return anim(ele);
    })
  }
  
  // 返回一个布置了毛病捕捉机制的Promise 
  return p.catch(function(e) {
    /* 疏忽毛病，继承实行 */
  }).then(function() {
    return ret;
  })
}

虽然Promise的写法比起回调函数的写法有很大的革新，然则操纵自身的语义却变得不太晴明。

用Generator完成

function chainAnimationsGenerator(ele, animations) {
  return spawn(function*() {
    var ret = null;
    try {
      for(var anim of animations) {
        ret = yield anim(ele)
      }
    } catch(e) {
      /* 疏忽毛病，继承实行 */
    }
    return ret;
  })
}

运用Generator虽然语义比Promise写法清楚不少，然则用户定义的操纵悉数出现在spawn函数的内部。这个写法的题目在于，必需有一个使命运转器自动实行Generator函数，它返回一个Promise对象，而且保证yield语句后的表达式返回的是一个Promise。上面的spawn就扮演了这一角色。它的完成以下：

function spawn(genF) {
  return new Promise(function(resolve, reject) {
    var gen = genF();
    function step(nextF) {
      try {
        var next = nextF()
      } catch(e) {
        return reject(e)
      }
      if (next.done) {
        return resolve(next.value)
      }
      Promise.resolve(next.value).then(function(v) {
        step(function() { return gen.next(v) })
      },function(e) {
        step(function() { return gen.throw(e) })
      })
    }
    step(function() { return gen.next(undefined) })
  })
}

运用async完成

async function chainAnimationAsync(ele, animations) {
  var ret = null;
  try {
    for(var anim of animations) {
      ret = await anim(ele)
    } 
  } catch(e) {
    /* 疏忽毛病，继承实行 */
  }
  return ret;
}

好了，光从代码量上就看出上风了吧！简约又相符语义，几乎没有不相关代码。完胜！

注重一点：async属于ES7的提案，运用时请经由过程babel或许regenerator举行转码。

参考

阮一峰 《ES6规范入门》

@迎接关注我的 github 和 个人博客 －Jafeney