同步和异步（Synchronous and Asynchronous）

相识javascript的同砚想必对同步和异步的观点应当都很熟习了，假如另有不熟习的同砚，我这里举个笼统的例子，比方我们早上起床后要干三件事：烧水、洗脸、吃早餐，同步相当于我们先烧水，水烧开了再洗脸，洗完脸再吃早餐，三件事递次实行，一件干完了再干下一件；而异步相当于我们在烧水的同时吃早餐（不洗脸就吃早餐不太卫生），吃完早餐再洗脸。明显异步比同步越发高效，省去了许多守候的时候，同步历程的实行时候取决于一切行动的总和，而异步历程的实行时候只取决于最长的谁人行动，如下图所示：

由于Javascript是单线程的，同时只能处置惩罚一件事，在上面的例子中这个单线程就是“我”，比方我不能同时洗脸和吃早餐一样。所以为了让实行效力进步，我们要只管让这个线程一向处于劳碌状况而不是闲置状况，就像我们不必干等烧水，能够同时去做其他事变，而烧水由体系的其他线程去处置惩罚（该线程不属于Javascript）。在计算机的天下中，许多I/O密集型的操纵是须要守候的，比方收集要求、文件读写等，所以异步要领在处置惩罚这些操纵会越发随心所欲。

异步历程掌握

相识异步的意义以后，我们来对照现在主流几种异步历程掌握要领，讨论一下异步编程的最好实践。

1. Callback

误区

起首callback和异步没有必然联系，callback实质就是范例为function的函数参数，关于该callback是同步照样异步实行则取决于函数自身。虽然callback常用于异步要领的回调，但其实有不少同步要领也能够传入callback，比方最罕见的数组的forEach要领：

var arr = [1, 2, 3];
arr.forEach(function (val) {
  console.log(val);
});
console.log('finish');

// 打印效果：1，2，3，finish

相似的另有数组的map, filter, reduce等许多要领。

异步Callback

罕见的异步callback如setTimeout中的回调：

setTimeout(function () {
  console.log("time's up");
}, 1000);
console.log('finish');

// 打印效果：finish, time's up

假如我们将延迟时候改成0，打印效果仍将是finish, time's up，由于异步callback会等函数中的同步要领都实行完成后再实行。

Callback Hell

在现实项目中我们经常会碰到如许的题目：下一步操纵依赖于上一步操纵的效果，上一步操纵又依赖于上上步操纵，而每一步操纵都是异步的。。如许递进的层级多了会构成许多层callback嵌套，致使代码可读性和可维护性变的很差，构成所谓的Callback Hell，相似如许：

step1(param, function (result1) {
  step2(result1, function (result2) {
    step3(result2, function (result3) {
      step4(result3, function (result4) {
        done(result4);
      })
    })
  })
})

当然在不摒弃运用callback的前提下，上面的代码照样有优化空间的，我们能够将它重新组织一下：

step1(param, callbac1);

function callback1(result1){
  step2(result1, callback2);
}

function callback2(result2){
  step3(result2, callback3);
}

function callback3(result3){
  step4(result3, callback4);
}

function callback4(result4){
  done(result4);
}

相当于将Callback Hell的横向深度转化为代码的纵向高度，变得更靠近于我们习气的由上到下的同步挪用， 复杂度没有变，只是看起来更清楚了，瑕玷就是要定义分外的函数、变量。将这一头脑进一步延长就有了下面的Promise。

2. Promise

Promise中文译为“许诺”，在Javascript中是一个笼统的观点，代表当前没有完成，但将来的某个时候点会（也能够不会）完成的一件事。举个实例化的例子：早上烧水，我给你一个许诺（Promise），十分钟后水能烧开，假如一切正常，10分钟以后水确切能烧开，代表这个promise兑现了（fullfilled），然则假如半途停电了，10分钟水没烧开，那这个promise兑现失利（rejected）。用代码能够示意为：

const boilWaterInTenMins = new Promise(function (resolve, reject) {
  boiler.work(function (timeSpent) {
    if (timeSpent <= 10) {
      resolve();
    } else {
      reject();
    }
  });
});

兼容性

假如想进步浏览器对Promise的兼容性能够运用babel或许第三方的完成（参考 github awesome promise）

Promise Chaining

我们再来看Promise关于异步历程掌握有怎样的提拔，还基于上面Callback Hell的例子，假如用Promise完成会怎样呢？

起首我们须要将step1 ~ done 的函数用Promise完成（即返回一个Promise），然后举行一连串的链式挪用就能够了：

stepOne(param)
  .then((result1) => { return step2(result1) })
  .then((result2) => { return step3(result2) })
  .then((result3) => { return step4(result3) })
  .then((result4) => { return done(result4) })
  .catch(err => handleError(err));

是否是简朴许多！

Async/Await

假如你不太习气Promise的挪用体式格局，那我们能够用async/await将其转化成更靠近同步挪用的体式格局：

async function main() {
  try {
    var result1 = await step1(param);
    var result2 = await step2(result1);
    var result3 = await step3(result2);
    var result4 = await step4(result3);
    done(result4);
  } catch (err) {
    handleError(err);
  }
}

main();

3. Generator

Generator是一个越发笼统的观点，要弄懂什么是Generator起首要明白别的几个观点Iterable Protocol（可迭代协定），Iterator Protocol（迭代器协定）和 Iterator（迭代器）。

Iterable Protocol

Iterable Protocol 的特性能够归纳综合为：

1. 用于定义javascript对象的迭代行动
2. 对象自身或许原型链上须要有一个名为Symbol.iterator的要领
3. 该要领不吸收任何参数，且返回一个Iterator
4. Iterable的对象能够运用for...of遍历

Javascript Array就完成了Iterable Protocol，除了通例的取值体式格局，我们也能够应用array的Symbol.iterator：

var arr = [1, 2, 3];
var iterator = arr[Symbol.iterator]();
iterator.next(); // {value: 1, done: false}

我们也能够修正Array默许的迭代体式格局，比方返回两倍的值：

Array.prototype[Symbol.iterator] = function () {
  var nextIndex = 0;
  var self = this;
  return {
    next: function () {
      return nextIndex < self.length ?
        { value: self[nextIndex++] * 2, done: false } :
        { done: true }
    }
  };
}

for(let el of [1, 2, 3]){
  console.log(el);
}
// 输出：2，4，6

Iterator Protocol

Iterator Protocol 的特性能够归纳综合为：

1. 一种发生一个序列值（有限或无穷）的规范体式格局
2. 完成一个next要领
3. next要领返回的对象为 {value: any, done: boolean}
4. value为返回值，done为true时value能够省略
5. done为true示意迭代完毕，此时value示意终究返回值
6. done为false，则能够继承迭代，发生下一个值

Iterator

明显Iterator就是完成了Iterator Protocol的对象。

Generator

明白上面几个观点后，明白Generator就简朴多了，generator的特性可归纳综合为：

1. 同时完成Iterable Protocol和Iterator Protocol，所以Genrator等于一个iterable的对象又是一个iterator
2. Generator由 generator function 天生

最简朴的generator function比方：

function* gen() {
  var x = yield 5 + 6;
}

var myGen = gen(); // myGen 就是一个generator

我们能够挪用next要领来取得yield表达式的值：

myGen.next(); // { value: 11, done: false }

但此时x并没有被赋值，能够设想成javascript实行完 yield 5 + 6 就停住了，为了继承实行赋值操纵我们须要再次挪用next，并将获得的值回传：

function* gen() {
  var x = yield 5 + 6;
  console.log(x); // 11
}

var myGen = gen();
console.log(myGen.next()); // { value: 11, done: false }
console.log(myGen.next(11)); // { value: undefined, done: true }

说了这么多，generator和异步到底有什么关系呢？我们来看Promise + Generator 完成的异步掌握（step1 ~ done 返回Promise）：

genWrap(function* () {
  var result1 = yield step1(param);
  var result2 = yield step2(result1);
  var result3 = yield step3(result2);
  var result4 = yield step4(result3);
  var result5 = yield done(result4);
});

function genWrap(genFunc) {
  var generator = genFunc();

  function handle(yielded) {
    if (!yielded.done) {
      yielded.value.then(function (result) {
        return handle(generator.next(result));
      });
    }
  }

  return handle(generator.next());
}

和async/await相似，这类完成也将异步要领转化成了同步的写法，现实上这就是 ES7中async/await的完成道理（将genWrap替换为async，将yield替换成await）。

结语

愿望本文对人人有点协助，能更深入的明白javascript异步编程，能写出更文雅更高效的代码。有毛病迎接斧正。新年快乐！