我瞭解到的JavaScript異步編程

時間 2019-12-05

原文原文鏈接

1、一道面試題

前段時間面試，考察比較多的是js異步編程方面的相關知識點，現在，正好輪到本身分享技術，因此想把js異步編程學習下，作個總結。
下面這個demo 歸納了大多數面試過程當中遇到的問題：javascript

for(var i = 0; i < 3; i++) {
   setTimeout(function() {
       console.log('timeout' + i);
   })
}
 
new Promise(function(resolve) {
    console.log('promise1');
    for(var i = 0; i < 1000; i++) {
        i == 99 && resolve();
    }
    console.log('promise2');
}).then(function() {
    console.log('then1');
})

console.log('global1');

經過驗證能夠得知這個demo的結果爲：html

但是爲何會是這樣的結果，咱們可能須要先了解下下面兩個知識點html5

2、二個前提知識點

2.1 瀏覽器內核的多線程

瀏覽器的內核是多線程的，他們在內核的控制下互相配合以保持同步，一個瀏覽器至少實現三個常駐的線程：javascript引擎線程，GUI渲染線程，瀏覽器事件觸發線程。java

1)js引擎，基於事件驅動單線程執行的，js引擎一直等待着任務隊列中任務的到來，而後加以處理，瀏覽器不管何時都只有一個JS線程在運行JS程序。
2）GUI線程，當界面須要重繪或因爲某種操做引起迴流時，該線程就會執行。它和JS引擎是互斥的。
3）瀏覽器事件觸發線程，當一個事件被觸發時，該線程會把事件添加到待處理隊列的隊尾，等待js引擎的處理，這些事件可來自JavaScript引擎當前執行的代碼塊如，setTimeOut, 也能夠來自瀏覽器內核的其餘線程如鼠標點擊，AJAX異步請求等，但因爲JS的單線程關係，全部這些事件都得排隊等待JS引擎處理。node

2.2 事件循環機制

1）任務隊列又分爲macro-task（宏任務）與micro-task（微任務），
在最新標準中，它們被分別稱爲task與jobs。git

2）macro-task大概包括：script(總體代碼), setTimeout, setInterval, setImmediate, I/O, UI rendering。github

3）micro-task【先執行】大概包括: process.nextTick, Promise, Object.observe(已廢棄), MutationObserver(html5新特性)面試

setTimeout/Promise等咱們稱之爲任務源。而進入任務隊列的是他們指定的具體執行任務。ajax

事件循環的順序，決定了JavaScript代碼的執行順序。它從script(總體代碼)開始第一次循環。以後全局上下文進入函數調用棧。直到調用棧清空(只剩全局)，而後執行全部的micro-task。當全部可執行的micro-task執行完畢以後。循環再次從macro-task開始，找到其中一個任務隊列執行完畢，而後再執行全部的macro-task，這樣一直循環下去。編程

經過這個事件循環的順序，咱們就知道，爲何上面提到的面試題爲何是這樣的輸出結果了。
接下來咱們看下三類異步編程的實現。

3、三類異步編程實現

3.1 回調函數

demo1:

// 一個簡單的封裝
function want() {
    console.log('這是你想要執行的代碼');
}

function fn(want) {
    console.log('這裏表示執行了一大堆各類代碼');

    // 其餘代碼執行完畢，最後執行回調函數
    want && want();
}

fn(want);

demo2:

//callback hell

doSomethingAsync1(function(){
    doSomethingAsync2(function(){
        doSomethingAsync3(function(){
            doSomethingAsync4(function(){
                doSomethingAsync5(function(){
                    // code...
                });
            });
        });
    });
});

能夠發現一個問題，在回調函數嵌套層數不深的狀況下，代碼還算容易理解和維護，一旦嵌套層數加深，就會出現「回調金字塔」的問題，就像demo2那樣，若是這裏面的每一個回調函數中又包含了不少業務邏輯的話，整個代碼塊就會變得很是複雜。從邏輯正確性的角度來講，上面這幾種回調函數的寫法沒有任何問題，可是隨着業務邏輯的增長和趨於複雜，這種寫法的缺點立刻就會暴露出來，想要維護它們實在是太痛苦了，這就是「回調地獄(callback hell)」。

回調函數還有一個問題就是咱們在回調函數以外沒法捕獲到回調函數中的異常，通常咱們用try catch來捕捉異常，咱們嘗試下捕捉回調中的異常

能夠看到，不能捕捉到callback中的異常。

3.2 事件監聽(事件發佈/訂閱)

事件監聽是一種很是常見的異步編程模式，它是一種典型的邏輯分離方式，對代碼解耦頗有用處。一般狀況下，咱們須要考慮哪些部分是不變的，哪些是容易變化的，把不變的部分封裝在組件內部，供外部調用，須要自定義的部分暴露在外部處理。從某種意義上說，事件的設計就是組件的接口設計。
1）jQuery事件監聽

$('#btn').on('myEvent', function(e) {
        console.log('There is my Event');
    });
    $('#btn').trigger('myEvent');

2）發佈/訂閱模式

var PubSub = function(){
        this.handlers = {}; 
    };
    PubSub.prototype.subscribe = function(eventType, handler) {
        if (!(eventType in this.handlers)) {
            this.handlers[eventType] = [];
        }
        this.handlers[eventType].push(handler); //添加事件監聽器
        return this;//返回上下文環境以實現鏈式調用
    };
    PubSub.prototype.publish = function(eventType) {
        var _args = Array.prototype.slice.call(arguments, 1);
        for (var i = 0, _handlers = this.handlers[eventType]; i < _handlers.length; i++) {
            _handlers[i].apply(this, _args);//遍歷事件監聽器
        }
        return this;
    };
    var event = new PubSub;//構造PubSub實例
    event.subscribe('list', function(msg) {
        console.log(msg);
    });
    event.publish('list', {data: ['one,', 'two']});
    //Object {data: Array[2]}

這種模式實現的異步編程，本質上仍是經過回調函數實現的，因此3.1中提到的回調嵌套和沒法捕捉異常的問題仍是存在的，接下來咱們看ES6提供的Promise對象，是否解決這兩個問題。

3.3 Promise對象

ES 6中原生提供了Promise對象，Promise對象表明了某個將來纔會知道結果的事件(通常是一個異步操做)，而且這個事件對外提供了統一的API，可供進一步處理。
使用Promise對象能夠用同步操做的流程寫法來表達異步操做，避免了層層嵌套的異步回調，代碼也更加清晰易懂，方便維護，也能夠捕捉異常。

一個簡單例子：

function fn(num) {
  return new Promise(function(resolve, reject) {
    if (typeof num == 'number') {
      resolve();
    } else {
      reject();
    }
  })
  .then(function() {
    console.log('參數是一個number值');
  })
  .then(null, function() {
    console.log('參數不是一個number值');
  })
}
fn('haha');
fn(1234);

爲何Promise 能夠這樣實現異步編程，在這咱們簡單分析下Promise實現過程：
1）極簡Promise雛形

// 極簡promise雛形
function Promise(fn) {
  var value = null,
    callbacks = [];  //callbacks爲數組，由於可能同時有不少個回調

  this.then = function (onFulfilled) {
    callbacks.push(onFulfilled);
  };

  function resolve(value) {
    callbacks.forEach(function (callback) {
      callback(value);
    });
  }

  fn(resolve);
}

若是promise內部的函數是同步函數，咱們要加入一些處理，保證在resolve執行以前，then方法已經註冊完全部的回調；
經過setTimeout機制，將resolve中執行回調的邏輯放置到JS任務隊列末尾，以保證在resolve執行時，then方法的回調函數已經註冊完成.

2）加入延時處理

// 極簡promise雛形，加入延時處理
function Promise(fn) {
  var value = null,
    callbacks = [];  //callbacks爲數組，由於可能同時有不少個回調

  this.then = function (onFulfilled) {
    callbacks.push(onFulfilled);
  };

  function resolve(value) {
    setTimeout(function() {
        callbacks.forEach(function (callback) {
            callback(value);
        });
    }, 0)
  }

  fn(resolve);
}

若是Promise異步操做已經成功，這時，在異步操做成功以前註冊的回調都會執行，可是在Promise異步操做成功這以後調用的then註冊的回調就不再會執行了，這顯然不是咱們想要的

3）加入狀態判斷

// 極簡promise雛形，加狀態判斷
function Promise(fn) {
  var state = 'pending',
      value = null,
      callbacks = [];

  this.then = function (onFulfilled) {
      if (state === 'pending') {
          callbacks.push(onFulfilled);
          return this;
      }
      onFulfilled(value);
      return this;
  };

  function resolve(newValue) {
      value = newValue;
      state = 'fulfilled';
      setTimeout(function () {
          callbacks.forEach(function (callback) {
              callback(value);
          });
      }, 0);
  }

  fn(resolve);
}

4）鏈式promise

// 極簡promise雛形，鏈式promise
function Promise(fn) {
  var state = 'pending',
      value = null,
      callbacks = [];

  this.then = function (onFulfilled) {
      return new Promise(function (resolve) {
          handle({
              onFulfilled: onFulfilled || null,
              resolve: resolve
          });
      });
  };

  function handle(callback) {
      if (state === 'pending') {
          callbacks.push(callback);
          return;
      }
      //若是then中沒有傳遞任何東西
      if(!callback.onResolved) {
          callback.resolve(value);
          return;
      }

      var ret = callback.onFulfilled(value);
      callback.resolve(ret);
  }
  
  function resolve(newValue) {
      if (newValue && (typeof newValue === 'object' || typeof newValue === 'function')) {
          var then = newValue.then;
          if (typeof then === 'function') {
              then.call(newValue, resolve);
              return;
          }
      }
      state = 'fulfilled';
      value = newValue;
      setTimeout(function () {
          callbacks.forEach(function (callback) {
              handle(callback);
          });
      }, 0);
  }

  fn(resolve);
}

4、四個擴展點

4.1 Promise經常使用的應用場景：ajax

利用Promise的知識，對ajax進行一個簡單的封裝。看看會是什麼樣子：

//demo3 promise封裝ajax
var url = 'https://hq.tigerbrokers.com/fundamental/finance_calendar/getType/2017-02-26/2017-06-10';
function getJSON(url) {
  return new Promise(function(resolve, reject) {
    var XHR = new XMLHttpRequest();
    XHR.open('GET', url, true);
    XHR.send();

    XHR.onreadystatechange = function() {
        if (XHR.readyState == 4) {
            if (XHR.status == 200) {
                try {
                    var response = JSON.parse(XHR.responseText);
                    resolve(response);
                } catch (e) {
                    reject(e);
                }
            } else {
                reject(new Error(XHR.statusText));
            }
        }
    }
  })
}
getJSON(url).then(resp => console.log(resp));

除了串行執行若干異步任務外，Promise還能夠並行執行異步任務。

當有一個ajax請求，它的參數須要另外2個甚至更多請求都有返回結果以後才能肯定，那麼這個時候，就須要用到Promise.all來幫助咱們應對這個場景。

4.2 Promise.all

Promise.all接收一個Promise對象組成的數組做爲參數，當這個數組全部的Promise對象狀態都變成resolved或者rejected的時候，它纔會去調用then方法。

// demo4 promise.all
var url = 'https://hq.tigerbrokers.com/fundamental/finance_calendar/getType/2017-02-26/2017-06-10';
var url1 = 'https://hq.tigerbrokers.com/fundamental/finance_calendar/getType/2017-03-26/2017-06-10';

function renderAll() {
  return Promise.all([getJSON(url), getJSON(url1)]);
}

renderAll().then(function(value) {
  console.log(value); //將獲得一個數組，裏面是兩個接口返回的值
})

結果：

有些時候，多個異步任務是爲了容錯。好比，同時向兩個URL讀取用戶的我的信息，只須要得到先返回的結果便可。這種狀況下，用Promise.race()實現。

4.3 Promise.race

與Promise.all類似的是，Promise.race都是以一個Promise對象組成的數組做爲參數，不一樣的是，只要當數組中的其中一個Promsie狀態變成resolved或者rejected時，就能夠調用.then方法了

// demo5 promise.race
function renderRace() {
  return Promise.race([getJSON(url), getJSON(url1)]);
}

renderRace().then(function(value) {
  console.log(value);
})

這裏then()傳的value值將是接口返回比較快的接口數據，另一個接口仍在繼續執行，但執行結果將被丟棄。

結果：

4.4 Generator 函數

Generator函數是協程在ES 6中的實現，最大特色就是能夠交出函數的執行權（暫停執行）。
注意：在node中須要開啓--harmony選項來啓用Generator函數。
整個Generator函數就是一個封裝的異步任務，或者說是異步任務的容器。異步操做須要暫停的地方，都用yield語句註明。

看個簡單的例子：

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

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

須要注意的是Generator函數的函數名前面有一個"*"。
上述代碼中，調用Generator函數，會返回一個內部指針(即遍歷器)g，這是Generator函數和通常函數不一樣的地方，調用它不會返回結果，而是一個指針對象。調用指針g的next方法，會移動內部指針，指向第一個遇到的yield語句，上例就是執行到x+2爲止。
換言之，next方法的做用是分階段執行Generator函數。每次調用next方法，會返回一個對象，表示當前階段的信息（value屬性和done屬性）。value屬性是yield語句後面表達式的值，表示當前階段的值；done屬性是一個布爾值，表示Generator函數是否執行完畢，便是否還有下一個階段。

對Generator函數，只有一個感性認知，沒有實踐過，因此就先介紹到這了，後面還有ES7新的知識點async await，看了下網上的資料，理解得還不夠，但願後面本身接觸得更多再來這裏補上，未完待續...

參考資料：
1) http://www.jianshu.com/p/12b9f73c5a4f
2) http://www.jianshu.com/p/fe5f173276bd
3) https://mengera88.github.io/2017/05/18/Promise%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/
4) http://www.cnblogs.com/nullcc/p/5841182.html