探索Javascript 異步編程

Salamander 發(fā)布于2019-08-22 10:35 / 3358人閱讀

摘要：因為瀏覽器環(huán)境里是單線程的，所以異步編程在前端領(lǐng)域尤為重要。除此之外，它還有兩個特性，使它可以作為異步編程的完整解決方案函數(shù)體內(nèi)外的數(shù)據(jù)交換和錯誤處理機(jī)制。

在我們?nèi)粘＞幋a中，需要異步的場景很多，比如讀取文件內(nèi)容、獲取遠(yuǎn)程數(shù)據(jù)、發(fā)送數(shù)據(jù)到服務(wù)端等。因為瀏覽器環(huán)境里Javascript是單線程的，所以異步編程在前端領(lǐng)域尤為重要。

異步的概念

所謂異步，是指當(dāng)一個過程調(diào)用發(fā)出后，調(diào)用者不能立刻得到結(jié)果。實際處理這個調(diào)用的過程在完成后，通過狀態(tài)、通知或者回調(diào)來通知調(diào)用者。

比如我們寫這篇文字時點擊發(fā)布按鈕，我們并不能馬上得到文章發(fā)布成功或者失敗。等待服務(wù)器處理，這段時間我們可以做其他的事情，當(dāng)服務(wù)器處理完成后，通知我們是否發(fā)布成功。

所謂同步，是指當(dāng)一個過程調(diào)用發(fā)出后，必須等待這個過程處理完成后，再處理其他事情。即堵塞執(zhí)行。

異步的方式

在es6之前，我們實現(xiàn)異步有4種方法，回調(diào)、事件、發(fā)布訂閱和promise方式。

異步之回調(diào):

function dealTask(param, callback) {
    // Deal with some time consuming tasks.
    // ...
    Object.prototype.toString.call(callback) === "[object Function]" ? callback() : null; 
}
 
dealTask({ id: 1 }, function() {
    console.log("... I am in the callback...");
})

回調(diào)的方式來實現(xiàn)異步其實就是把需要在當(dāng)前任務(wù)完成后執(zhí)行的函數(shù)當(dāng)成參數(shù)傳入，完成任務(wù)后執(zhí)行即可。

異步之事件

function dealTask(param) {
    // Deal with some time consuming tasks.
    // ...
    events.trigger("dealTaskFinish")
}
events.on("dealTaskFinish", function() {
    console.log("...I am in the end...");
})

通過事件來實現(xiàn)回調(diào)，好處是方便實用，跨模塊傳遞數(shù)據(jù)。壞處是，事件用的多了后業(yè)務(wù)邏輯混亂，不知道哪里注冊過哪里監(jiān)聽過。

另外需要注意的是在web component場景下，mount后注冊過的事件需要在unmount釋放，不然會導(dǎo)致內(nèi)存泄露。

異步之發(fā)布訂閱

發(fā)布訂閱的簡單例子是，一個開關(guān)，同時并聯(lián)幾個燈泡(在不同房間)，觸發(fā)的時候，幾個燈泡都會得到指令，然后執(zhí)行發(fā)光的行為。

// 使用pubsubz實現(xiàn)
var testSubscriber = function(data ){
    console.log(data );
};
var testSubscription = pubsubz.subscribe( "example", testSubscriber );
pubsubz.publish( "example", "hello" );

訂閱發(fā)布與的性質(zhì)與"事件監(jiān)聽"類似，不同的是，我們可以通過查看"消息中心"，了解存在多少信號、每個信號有多少訂閱者，從而監(jiān)控程序的運行。

異步之Promise

function helloWorld (ready) {
    return new Promise(function (resolve, reject) {
        if (ready) {
            resolve("Hello World!")
        } else {
            reject("Good bye!")
        }
    })
}

helloWorld(true).then(function (message) {
    console.log(message)
}, function (error) {
    console.log(error)
})

Promises對象是CommonJS工作組提出的一種規(guī)范，是對異步編程的一種統(tǒng)一，其實也就是語法糖，可閱讀性變強(qiáng)了而已。

在ES6出來以后，我們的異步方式也發(fā)生了改變。

異步之Generator

Generator函數(shù)是協(xié)程在ES6的實現(xiàn)，最大特點就是可以交出函數(shù)的執(zhí)行權(quán)（即暫停執(zhí)行）。

Generator函數(shù)可以暫停執(zhí)行和恢復(fù)執(zhí)行，這是它能封裝異步任務(wù)的根本原因。除此之外，它還有兩個特性，使它可以作為異步編程的完整解決方案：函數(shù)體內(nèi)外的數(shù)據(jù)交換和錯誤處理機(jī)制。

function* Foo(x) {
  yield x + 1;

  var y = yield null;
  return x + y;
}

var foo = Foo(5);
foo.next();     // { value: 6, done: false }
foo.next();     // { value: null, done: false }
foo.next(8);    // { value: 13, done: true }

next方法返回值的value屬性，是Generator函數(shù)向外輸出數(shù)據(jù)；next方法還可以接受參數(shù)，這是向Generator函數(shù)體內(nèi)輸入數(shù)據(jù)。

yield命令用于將程序的執(zhí)行權(quán)移出Generator函數(shù)，那么就需要一種方法，將執(zhí)行權(quán)再交還給Generator函數(shù)

上面的方式，是我們手動調(diào)用Generator函數(shù)執(zhí)行，但是當(dāng)我們的需要執(zhí)行next方法很多時，就需要Generator函數(shù)自動執(zhí)行了。

Generator函數(shù)自動執(zhí)行的意思是，通過一定的方法來自動執(zhí)行next方法，比如：

function autoRunGen(gen){
  var g = gen();

  function next(data){
    var result = g.next(data);
    if (result.done) return result.value;
    result.value.then(function(data){
      next(data);
    });
  }
  next();
}

co模塊是TJ開發(fā)的一個小工具，用于Generator函數(shù)的自動執(zhí)行。他的主要思想和上面的代碼片段類似。

使用co的前提條件是，Generator函數(shù)的yield命令后面，只能是Promise對象。

co(function *() {
    var data = yield $.get("/api/data");
    console.log(data);
    var user = yield $.get("/api/user");
    console.log(user);
    var products = yield $.get("/api/products");
    console.log(products);
});

co模塊使得我們可以像寫同步代碼一樣，寫異步代碼。

異步之a(chǎn)sync/await

async函數(shù)僅僅是Generator函數(shù)的語法糖。

var fs = require("fs");

var readFile = function (fileName) {
  return new Promise(function (resolve, reject) {
    fs.readFile(fileName, function(error, data) {
      if (error) reject(error);
      resolve(data);
    });
  });
};

var gen = function* (){
  var f1 = yield readFile("/etc/a.js");
  var f2 = yield readFile("/etc/b.js");
  console.log(f1.toString());
  console.log(f2.toString());
};

使用async/await方式:

var asyncReadFile = async function (){
  var f1 = await readFile("/etc/a.js");
  var f2 = await readFile("/etc/b.js");
  console.log(f1.toString());
  console.log(f2.toString());
};

async函數(shù)就是將Generator函數(shù)的星號（*）替換成async，將yield替換成await，僅此而已。

不同的是，Generator執(zhí)行需要手動執(zhí)行，而async函數(shù)可以自動執(zhí)行，像寫同步一樣寫異步。Generator返回Iterator對象，async函數(shù)返回Promise對象。