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

回調(diào)地獄

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

這種模式的好處是實現(xiàn)起來比較簡單，執(zhí)行環(huán)境相對單純；壞處是只要有一個任務耗時很長，后面的任務都必須排隊等著，會拖延整個程序的執(zhí)行。常見的瀏覽器無響應（假死），往往就是因為某一段 JavaScript 代碼長時間運行（比如死循環(huán)），導致整個頁面卡在這個地方，其他任務無法執(zhí)行。

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

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

  function f1(callback) {
      callback();
  }

f1.on("done", f2);

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

jQuery.subscribe("done", f2);

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

jQuery.unsubscribe("done", f2);

這種方法的性質(zhì)與”事件監(jiān)聽”類似，但是明顯優(yōu)于后者。因為我們可以通過查看”消息中心”，了解存在多少信號、每個信號有多少訂閱者，從而監(jiān)控程序的運行。

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

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

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

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

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

請問應該如何安排操作流程？

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

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

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

 let taskQueen = [1, 2, 3, 4, 5, 6];
 let result = [];
 function invoke(curTask) {
    if (curTask) {
      console.log("當前正在執(zhí)行任務", curTask);
      result.push(curTask + "完成");
    } else {
      console.log("當前任務全部完成");
    }
 }
 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方法會同時發(fā)起6個異步任務，等到它們?nèi)客瓿梢院螅艜?zhí)行final函數(shù)。

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

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 對象用于一個異步操作的最終完成（或失敗）及其結果值的表示。(簡單點說就是處理異步請求。我們經(jīng)常會做些承諾，如果我贏了你就嫁給我，如果輸了我就嫁給你之類的諾言。這就是promise的中文含義：諾言，一個成功，一個失敗。) -MDN

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

一個 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 運行的各種錯誤 promise.then(undefined, onRejected)
的語法糖

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

生成并返回一個新的promise對象。

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

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

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

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
});

生成并返回一個新的promise對象。

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

JavaScript Promise迷你書（中文版）

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