我了解到的JavaScript異步編程

RichardXG 發(fā)布于2019-08-20 18:56 / 2948人閱讀

摘要：接下來我們看下三類異步編程的實(shí)現(xiàn)。事件監(jiān)聽事件發(fā)布訂閱事件監(jiān)聽是一種非常常見的異步編程模式，它是一種典型的邏輯分離方式，對(duì)代碼解耦很有用處。

一、一道面試題

前段時(shí)間面試，考察比較多的是js異步編程方面的相關(guān)知識(shí)點(diǎn)，如今，正好輪到自己分享技術(shù)，所以想把js異步編程學(xué)習(xí)下，做個(gè)總結(jié)。
下面這個(gè)demo 概括了大多數(shù)面試過程中遇到的問題：

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

通過驗(yàn)證可以得知這個(gè)demo的結(jié)果為：

可是為什么會(huì)是這樣的結(jié)果，我們可能需要先了解下下面兩個(gè)知識(shí)點(diǎn)

二、二個(gè)前提知識(shí)點(diǎn) 2.1 瀏覽器內(nèi)核的多線程

瀏覽器的內(nèi)核是多線程的，他們?cè)趦?nèi)核的控制下互相配合以保持同步，一個(gè)瀏覽器至少實(shí)現(xiàn)三個(gè)常駐的線程：javascript引擎線程，GUI渲染線程，瀏覽器事件觸發(fā)線程。

1)js引擎，基于事件驅(qū)動(dòng)單線程執(zhí)行的，js引擎一直等待著任務(wù)隊(duì)列中任務(wù)的到來，然后加以處理，瀏覽器無論什么時(shí)候都只有一個(gè)JS線程在運(yùn)行JS程序。
2）GUI線程，當(dāng)界面需要重繪或由于某種操作引發(fā)回流時(shí)，該線程就會(huì)執(zhí)行。它和JS引擎是互斥的。
3）瀏覽器事件觸發(fā)線程，當(dāng)一個(gè)事件被觸發(fā)時(shí)，該線程會(huì)把事件添加到待處理隊(duì)列的隊(duì)尾，等待js引擎的處理，這些事件可來自JavaScript引擎當(dāng)前執(zhí)行的代碼塊如，setTimeOut, 也可以來自瀏覽器內(nèi)核的其他線程如鼠標(biāo)點(diǎn)擊，AJAX異步請(qǐng)求等，但由于JS的單線程關(guān)系，所有這些事件都得排隊(duì)等待JS引擎處理。

2.2 事件循環(huán)機(jī)制

1）任務(wù)隊(duì)列又分為macro-task（宏任務(wù)）與micro-task（微任務(wù)），
在最新標(biāo)準(zhǔn)中，它們被分別稱為task與jobs。

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

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

setTimeout/Promise等我們稱之為任務(wù)源。而進(jìn)入任務(wù)隊(duì)列的是他們指定的具體執(zhí)行任務(wù)。

事件循環(huán)的順序，決定了JavaScript代碼的執(zhí)行順序。它從script(整體代碼)開始第一次循環(huán)。之后全局上下文進(jìn)入函數(shù)調(diào)用棧。直到調(diào)用棧清空(只剩全局)，然后執(zhí)行所有的micro-task。當(dāng)所有可執(zhí)行的micro-task執(zhí)行完畢之后。循環(huán)再次從macro-task開始，找到其中一個(gè)任務(wù)隊(duì)列執(zhí)行完畢，然后再執(zhí)行所有的macro-task，這樣一直循環(huán)下去。

通過這個(gè)事件循環(huán)的順序，我們就知道，為什么上面提到的面試題為什么是這樣的輸出結(jié)果了。
接下來我們看下三類異步編程的實(shí)現(xiàn)。

三、三類異步編程實(shí)現(xiàn) 3.1 回調(diào)函數(shù)

demo1:

// 一個(gè)簡(jiǎn)單的封裝
function want() {
    console.log("這是你想要執(zhí)行的代碼");
}

function fn(want) {
    console.log("這里表示執(zhí)行了一大堆各種代碼");

    // 其他代碼執(zhí)行完畢，最后執(zhí)行回調(diào)函數(shù)
    want && want();
}

fn(want);

demo2:

//callback hell

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

可以發(fā)現(xiàn)一個(gè)問題，在回調(diào)函數(shù)嵌套層數(shù)不深的情況下，代碼還算容易理解和維護(hù)，一旦嵌套層數(shù)加深，就會(huì)出現(xiàn)“回調(diào)金字塔”的問題，就像demo2那樣，如果這里面的每個(gè)回調(diào)函數(shù)中又包含了很多業(yè)務(wù)邏輯的話，整個(gè)代碼塊就會(huì)變得非常復(fù)雜。從邏輯正確性的角度來說，上面這幾種回調(diào)函數(shù)的寫法沒有任何問題，但是隨著業(yè)務(wù)邏輯的增加和趨于復(fù)雜，這種寫法的缺點(diǎn)馬上就會(huì)暴露出來，想要維護(hù)它們實(shí)在是太痛苦了，這就是“回調(diào)地獄(callback hell)”。

回調(diào)函數(shù)還有一個(gè)問題就是我們?cè)诨卣{(diào)函數(shù)之外無法捕獲到回調(diào)函數(shù)中的異常，一般我們用try catch來捕捉異常，我們嘗試下捕捉回調(diào)中的異常

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

3.2 事件監(jiān)聽(事件發(fā)布/訂閱)

事件監(jiān)聽是一種非常常見的異步編程模式，它是一種典型的邏輯分離方式，對(duì)代碼解耦很有用處。通常情況下，我們需要考慮哪些部分是不變的，哪些是容易變化的，把不變的部分封裝在組件內(nèi)部，供外部調(diào)用，需要自定義的部分暴露在外部處理。從某種意義上說，事件的設(shè)計(jì)就是組件的接口設(shè)計(jì)。
1）jQuery事件監(jiān)聽

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

2）發(fā)布/訂閱模式

    var PubSub = function(){
        this.handlers = {}; 
    };
    PubSub.prototype.subscribe = function(eventType, handler) {
        if (!(eventType in this.handlers)) {
            this.handlers[eventType] = [];
        }
        this.handlers[eventType].push(handler); //添加事件監(jiān)聽器
        return this;//返回上下文環(huán)境以實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用
    };
    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);//遍歷事件監(jiān)聽器
        }
        return this;
    };
    var event = new PubSub;//構(gòu)造PubSub實(shí)例
    event.subscribe("list", function(msg) {
        console.log(msg);
    });
    event.publish("list", {data: ["one,", "two"]});
    //Object {data: Array[2]}

這種模式實(shí)現(xiàn)的異步編程，本質(zhì)上還是通過回調(diào)函數(shù)實(shí)現(xiàn)的，所以3.1中提到的回調(diào)嵌套和無法捕捉異常的問題還是存在的，接下來我們看ES6提供的Promise對(duì)象，是否解決這兩個(gè)問題。

3.3 Promise對(duì)象

ES 6中原生提供了Promise對(duì)象，Promise對(duì)象代表了某個(gè)未來才會(huì)知道結(jié)果的事件(一般是一個(gè)異步操作)，并且這個(gè)事件對(duì)外提供了統(tǒng)一的API，可供進(jìn)一步處理。
使用Promise對(duì)象可以用同步操作的流程寫法來表達(dá)異步操作，避免了層層嵌套的異步回調(diào)，代碼也更加清晰易懂，方便維護(hù)，也可以捕捉異常。

一個(gè)簡(jiǎn)單例子：

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

為什么Promise 可以這樣實(shí)現(xiàn)異步編程，在這我們簡(jiǎn)單分析下Promise實(shí)現(xiàn)過程：
1）極簡(jiǎn)Promise雛形

// 極簡(jiǎn)promise雛形
function Promise(fn) {
  var value = null,
    callbacks = [];  //callbacks為數(shù)組，因?yàn)榭赡芡瑫r(shí)有很多個(gè)回調(diào)

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

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

  fn(resolve);
}

如果promise內(nèi)部的函數(shù)是同步函數(shù)，我們要加入一些處理，保證在resolve執(zhí)行之前，then方法已經(jīng)注冊(cè)完所有的回調(diào)；

通過setTimeout機(jī)制，將resolve中執(zhí)行回調(diào)的邏輯放置到JS任務(wù)隊(duì)列末尾，以保證在resolve執(zhí)行時(shí)，then方法的回調(diào)函數(shù)已經(jīng)注冊(cè)完成.

2）加入延時(shí)處理

// 極簡(jiǎn)promise雛形，加入延時(shí)處理
function Promise(fn) {
  var value = null,
    callbacks = [];  //callbacks為數(shù)組，因?yàn)榭赡芡瑫r(shí)有很多個(gè)回調(diào)

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

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

  fn(resolve);
}

如果Promise異步操作已經(jīng)成功，這時(shí)，在異步操作成功之前注冊(cè)的回調(diào)都會(huì)執(zhí)行，但是在Promise異步操作成功這之后調(diào)用的then注冊(cè)的回調(diào)就再也不會(huì)執(zhí)行了，這顯然不是我們想要的

3）加入狀態(tài)判斷

// 極簡(jiǎn)promise雛形，加狀態(tài)判斷
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）鏈?zhǔn)絧romise

// 極簡(jiǎn)promise雛形，鏈?zhǔn)絧romise
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);
}

四、四個(gè)擴(kuò)展點(diǎn) 4.1 Promise常用的應(yīng)用場(chǎng)景：ajax

利用Promise的知識(shí)，對(duì)ajax進(jìn)行一個(gè)簡(jiǎn)單的封裝。看看會(huì)是什么樣子：

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

除了串行執(zhí)行若干異步任務(wù)外，Promise還可以并行執(zhí)行異步任務(wù)。

當(dāng)有一個(gè)ajax請(qǐng)求，它的參數(shù)需要另外2個(gè)甚至更多請(qǐng)求都有返回結(jié)果之后才能確定，那么這個(gè)時(shí)候，就需要用到Promise.all來幫助我們應(yīng)對(duì)這個(gè)場(chǎng)景。

4.2 Promise.all

Promise.all接收一個(gè)Promise對(duì)象組成的數(shù)組作為參數(shù)，當(dāng)這個(gè)數(shù)組所有的Promise對(duì)象狀態(tài)都變成resolved或者rejected的時(shí)候，它才會(huì)去調(diào)用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); //將得到一個(gè)數(shù)組，里面是兩個(gè)接口返回的值
})

結(jié)果：

有些時(shí)候，多個(gè)異步任務(wù)是為了容錯(cuò)。比如，同時(shí)向兩個(gè)URL讀取用戶的個(gè)人信息，只需要獲得先返回的結(jié)果即可。這種情況下，用Promise.race()實(shí)現(xiàn)。

4.3 Promise.race

與Promise.all相似的是，Promise.race都是以一個(gè)Promise對(duì)象組成的數(shù)組作為參數(shù)，不同的是，只要當(dāng)數(shù)組中的其中一個(gè)Promsie狀態(tài)變成resolved或者rejected時(shí)，就可以調(diào)用.then方法了

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

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

這里then()傳的value值將是接口返回比較快的接口數(shù)據(jù)，另外一個(gè)接口仍在繼續(xù)執(zhí)行，但執(zhí)行結(jié)果將被丟棄。

結(jié)果：

4.4 Generator 函數(shù)

Generator函數(shù)是協(xié)程在ES 6中的實(shí)現(xiàn)，最大特點(diǎn)就是可以交出函數(shù)的執(zhí)行權(quán)（暫停執(zhí)行）。
注意：在node中需要開啟--harmony選項(xiàng)來啟用Generator函數(shù)。
整個(gè)Generator函數(shù)就是一個(gè)封裝的異步任務(wù)，或者說是異步任務(wù)的容器。異步操作需要暫停的地方，都用yield語(yǔ)句注明。

看個(gè)簡(jiǎn)單的例子：

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函數(shù)的函數(shù)名前面有一個(gè)"*"。
上述代碼中，調(diào)用Generator函數(shù)，會(huì)返回一個(gè)內(nèi)部指針(即遍歷器)g，這是Generator函數(shù)和一般函數(shù)不同的地方，調(diào)用它不會(huì)返回結(jié)果，而是一個(gè)指針對(duì)象。調(diào)用指針g的next方法，會(huì)移動(dòng)內(nèi)部指針，指向第一個(gè)遇到的yield語(yǔ)句，上例就是執(zhí)行到x+2為止。
換言之，next方法的作用是分階段執(zhí)行Generator函數(shù)。每次調(diào)用next方法，會(huì)返回一個(gè)對(duì)象，表示當(dāng)前階段的信息（value屬性和done屬性）。value屬性是yield語(yǔ)句后面表達(dá)式的值，表示當(dāng)前階段的值；done屬性是一個(gè)布爾值，表示Generator函數(shù)是否執(zhí)行完畢，即是否還有下一個(gè)階段。

對(duì)Generator函數(shù)，只有一個(gè)感性認(rèn)知，沒有實(shí)踐過，所以就先介紹到這了，后面還有ES7新的知識(shí)點(diǎn)async await，看了下網(wǎng)上的資料，理解得還不夠，希望后面自己接觸得更多再來這里補(bǔ)上，未完待續(xù)...

參考資料：
1) http://www.jianshu.com/p/12b9...
2) http://www.jianshu.com/p/fe5f...
3) https://mengera88.github.io/2...
4) http://www.cnblogs.com/nullcc...

云服務(wù)器 GPU云服務(wù)器 javascript異步編程深入了解javascript 異步編程 javascript異步函數(shù)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/84905.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

RichardXG

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

#yyds干貨盤點(diǎn)#劍指 Offer 09. 用兩個(gè)棧實(shí)現(xiàn)隊(duì)列

閱讀 922·2021-11-25 09:44
【即時(shí)通訊軟件系統(tǒng)——開題報(bào)告分享（僅供參考呀）】

閱讀 1171·2021-11-19 09:40
這8個(gè)國(guó)外免費(fèi)可商用圖標(biāo)素材網(wǎng)站前端設(shè)計(jì)和網(wǎng)站素材必備

閱讀 7389·2021-09-07 10:23
CSS基礎(chǔ)篇--頁(yè)面實(shí)現(xiàn)兩列布局，一列固定寬度，一列寬度自適應(yīng)方法

閱讀 2051·2019-08-28 17:51
Authing 是什么及實(shí)現(xiàn)了哪些國(guó)際身份協(xié)議

閱讀 1192·2019-08-26 10:59
安裝npm及cnpm

閱讀 1993·2019-08-26 10:25
WebAssembly應(yīng)用到前端工程（下）—— webpack和webassembly

閱讀 3257·2019-08-23 18:22
每日 30 秒 ? HTML Cosplay

閱讀 934·2019-08-23 16:58

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

我了解到的JavaScript異步編程

相關(guān)文章

前端_JavaScript

H5學(xué)習(xí)

JavaScript 異步

前端知識(shí)點(diǎn)整理

發(fā)表評(píng)論

0條評(píng)論

RichardXG

男|高級(jí)講師

TA的文章

#yyds干貨盤點(diǎn)#劍指 Offer 09. 用兩個(gè)棧實(shí)現(xiàn)隊(duì)列

【即時(shí)通訊軟件系統(tǒng)——開題報(bào)告分享（僅供參考呀）】

這8個(gè)國(guó)外免費(fèi)可商用圖標(biāo)素材網(wǎng)站前端設(shè)計(jì)和網(wǎng)站素材必備

CSS基礎(chǔ)篇--頁(yè)面實(shí)現(xiàn)兩列布局，一列固定寬度，一列寬度自適應(yīng)方法

Authing 是什么及實(shí)現(xiàn)了哪些國(guó)際身份協(xié)議

安裝npm及cnpm

WebAssembly應(yīng)用到前端工程（下）—— webpack和webassembly

每日 30 秒 ? HTML Cosplay

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

我了解到的JavaScript異步編程

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！