摘要：完成請(qǐng)問(wèn)應(yīng)該如何安排操作流程上面代碼采用個(gè)回調(diào)函數(shù)的嵌套，不僅寫起來(lái)麻煩，容易出錯(cuò)，而且難以維護(hù)串行執(zhí)行我們可以編寫一個(gè)流程控制函數(shù)，讓它來(lái)控制異步任務(wù)，一個(gè)任務(wù)完成以后，再執(zhí)行另一個(gè)。

回調(diào)地獄

Javascript 語(yǔ)言的執(zhí)行環(huán)境是“單線程”（single thread）。所謂“單線程”，就是指一次只能完成一件任務(wù)。如果有多個(gè)任務(wù)，就必須排隊(duì)，前面一個(gè)任務(wù)完成，再執(zhí)行后面一個(gè)任務(wù)。

這種模式的好處是實(shí)現(xiàn)起來(lái)比較簡(jiǎn)單，執(zhí)行環(huán)境相對(duì)單純；壞處是只要有一個(gè)任務(wù)耗時(shí)很長(zhǎng)，后面的任務(wù)都必須排隊(duì)等著，會(huì)拖延整個(gè)程序的執(zhí)行。常見(jiàn)的瀏覽器無(wú)響應(yīng)（假死），往往就是因?yàn)槟骋欢?JavaScript 代碼長(zhǎng)時(shí)間運(yùn)行（比如死循環(huán)），導(dǎo)致整個(gè)頁(yè)面卡在這個(gè)地方，其他任務(wù)無(wú)法執(zhí)行。

為了解決這個(gè)問(wèn)題，Javascript 語(yǔ)言將任務(wù)的執(zhí)行模式分成兩種：同步（Synchronous）和異步（Asynchronous）。

假定有兩個(gè)函數(shù)f1和f2，后者必須等到前者執(zhí)行完成，才能執(zhí)行。這時(shí)，可以考慮改寫f1，把f2寫成f1的回調(diào)函數(shù)。

  function f1(callback) {
      callback();
  }

f1.on("done", f2);

function f1(){
  setTimeout(function () {
    // f1的任務(wù)代碼
    f1.trigger("done");
  }, 1000);
}

jQuery.subscribe("done", f2);

function f1(){
    setTimeout(function () {
        // f1的任務(wù)代碼
        jQuery.publish("done");
    }, 1000);
}

jQuery.unsubscribe("done", f2);

這種方法的性質(zhì)與”事件監(jiān)聽(tīng)”類似，但是明顯優(yōu)于后者。因?yàn)槲覀兛梢酝ㄟ^(guò)查看”消息中心”，了解存在多少信號(hào)、每個(gè)信號(hào)有多少訂閱者，從而監(jiān)控程序的運(yùn)行。

如果有多個(gè)異步操作，就存在一個(gè)流程控制的問(wèn)題：確定操作執(zhí)行的順序，以后如何保證遵守這種順序

function async(arg, callback) {
  console.log("參數(shù)為 " + arg +" , 1秒后返回結(jié)果");
  setTimeout(function() { callback(arg * 2); }, 1000);
}

上面代碼的async函數(shù)是一個(gè)異步任務(wù)，非常耗時(shí)，每次執(zhí)行需要1秒才能完成，然后再調(diào)用回調(diào)函數(shù)。

如果有6個(gè)這樣的異步任務(wù)，需要全部完成后，才能執(zhí)行下一步的final函數(shù)。

function final(value) {
  console.log("完成: ", value);
}

請(qǐng)問(wèn)應(yīng)該如何安排操作流程？

async(1, function(value){
  async(value, function(value){
    async(value, function(value){
      async(value, function(value){
        async(value, function(value){
          async(value, final);
        });
      });
    });
  });
});

上面代碼采用6個(gè)回調(diào)函數(shù)的嵌套，不僅寫起來(lái)麻煩，容易出錯(cuò)，而且難以維護(hù)

我們可以編寫一個(gè)流程控制函數(shù)，讓它來(lái)控制異步任務(wù)，一個(gè)任務(wù)完成以后，再執(zhí)行另一個(gè)。這就叫串行執(zhí)行。（任務(wù)隊(duì)列）

 let taskQueen = [1, 2, 3, 4, 5, 6];
 let result = [];
 function invoke(curTask) {
    if (curTask) {
      console.log("當(dāng)前正在執(zhí)行任務(wù)", curTask);
      result.push(curTask + "完成");
    } else {
      console.log("當(dāng)前任務(wù)全部完成");
    }
 }
 invoke(taskQueen.shift());

var items = [ 1, 2, 3, 4, 5, 6 ];
var results = [];
function series(item) {
  if(item) {
    async( item, function(result) {
      results.push(result);
      return series(items.shift());
    });
  } else {
    return final(results);
  }
}
series(items.shift());

    var items = [ 1, 2, 3, 4, 5, 6 ];
    var results = [];
    items.forEach(function(item) {
      async(item, function(result){
        results.push(result);
        if(results.length == items.length) {
          final(results);
        }
      })
    });

上面代碼中，forEach方法會(huì)同時(shí)發(fā)起6個(gè)異步任務(wù)，等到它們?nèi)客瓿梢院螅艜?huì)執(zhí)行final函數(shù)。

并行執(zhí)行的好處是效率較高，比起串行執(zhí)行一次只能執(zhí)行一個(gè)任務(wù)，較為節(jié)約時(shí)間。但是問(wèn)題在于如果并行的任務(wù)較多，很容易耗盡系統(tǒng)資源，拖慢運(yùn)行速度。因此有了第三種流程控制方式

function launcher() {
  while(running < limit && items.length > 0) {
    var item = items.shift();
    async(item, function(result) {
      results.push(result);
      running--;
      if(items.length > 0) {
        launcher();
      } else if(running == 0) {
        final(results);
      }
    });
    running++;
  }
}

launcher();

Promise 對(duì)象用于一個(gè)異步操作的最終完成（或失敗）及其結(jié)果值的表示。(簡(jiǎn)單點(diǎn)說(shuō)就是處理異步請(qǐng)求。我們經(jīng)常會(huì)做些承諾，如果我贏了你就嫁給我，如果輸了我就嫁給你之類的諾言。這就是promise的中文含義：諾言，一個(gè)成功，一個(gè)失敗。) -MDN

new Promise(
    /* executor */
    function(resolve, reject) {...}
);

一個(gè) Promise有以下幾種狀態(tài):

pending: 初始狀態(tài)，不是成功或失敗狀態(tài)。

fulfilled: 意味著操作成功完成。

rejected: 意味著操作失敗。

  var promise = new Promise(function(resolve, reject){
      resolve("傳遞給then的值");
  });
  promise.then(function (value) {
      console.log(value);
  }, function (error) {
      console.error(error);
  });

捕獲promise 運(yùn)行的各種錯(cuò)誤 promise.then(undefined, onRejected)
的語(yǔ)法糖

var promise = new Promise(function(resolve, reject){
    resolve("傳遞給then的值");
});
promise.then(function (value) {
    console.log(value);
}).catch(function (error) {
    console.error(error);
});

生成并返回一個(gè)新的promise對(duì)象。

參數(shù)傳遞promise數(shù)組中所有的promise對(duì)象都變?yōu)閞esolve的時(shí)候，該方法才會(huì)返回， 新創(chuàng)建的promise則會(huì)使用這些promise的值。

如果參數(shù)中的任何一個(gè)promise為reject的話，則整個(gè)Promise.all調(diào)用會(huì)立即終止，并返回一個(gè)reject的新的promise對(duì)象。

由于參數(shù)數(shù)組中的每個(gè)元素都是由 Promise.resolve 包裝（wrap）的，所以Paomise.all可以處理不同類型的promose對(duì)象。

var p1 = Promise.resolve(1),
    p2 = Promise.resolve(2),
    p3 = Promise.resolve(3);
Promise.all([p1, p2, p3]).then(function (results) {
    console.log(results);  // [1, 2, 3]
});

var p1 = Promise.resolve(1),
    p2 = Promise.resolve(2),
    p3 = Promise.resolve(3);
Promise.race([p1, p2, p3]).then(function (value) {
    console.log(value);  // 1
});

生成并返回一個(gè)新的promise對(duì)象。

參數(shù) promise 數(shù)組中的任何一個(gè)promise對(duì)象如果變?yōu)閞esolve或者reject的話， 該函數(shù)就會(huì)返回，并使用這個(gè)promise對(duì)象的值進(jìn)行resolve或者reject。

JavaScript Promise迷你書（中文版）

promise阮一峰(http://javascript.ruanyifeng....