基于瀏覽器的事件輪詢(xún)機(jī)制（以及Node.js中的事件輪詢(xún)機(jī)制），JavaScript常常會(huì)運(yùn)行在異步環(huán)境中。由于JavaScript本身語(yǔ)言的特性（不需要程序員操控線(xiàn)程/進(jìn)程），在js中解決異步化編程的方法就顯得相當(dāng)重要?？梢哉f(shuō)一個(gè)完整的項(xiàng)目中，js開(kāi)發(fā)人員是不可能不面對(duì)異步操作的。本文將詳細(xì)介紹幾種經(jīng)典JavaScript異步編程串行化方法，同時(shí)也將簡(jiǎn)單介紹一下ES6提供的Promise順序執(zhí)行方法。

一.回調(diào)函數(shù)

（1）經(jīng)典回調(diào)函數(shù)方式：嵌套內(nèi)聯(lián)函數(shù)

假設(shè)我們有一個(gè)ajax()方法，他接收一個(gè)url參數(shù)，向該地址發(fā)起一個(gè)異步請(qǐng)求，在請(qǐng)求結(jié)束時(shí)執(zhí)行第二個(gè)參數(shù)—一個(gè)回調(diào)函數(shù)：

ajax(url,function(result){
 console.log(result);
});

可以說(shuō)這種方式幾乎是每個(gè)前端開(kāi)發(fā)人員都用過(guò)的回調(diào)函數(shù)方式，有了這樣的回調(diào)機(jī)制，開(kāi)發(fā)人員就不用編寫(xiě)類(lèi)似下面這樣的代碼來(lái)推測(cè)服務(wù)器請(qǐng)求什么時(shí)候返回：

var result=ajax(url);
setTimeout(function(result){
 console.log(result);
},400);

大家應(yīng)該能明白我此處想表達(dá)的意思。我們?cè)O(shè)置了一個(gè)延遲400毫秒的定時(shí)器，來(lái)假設(shè)我們發(fā)出的ajax請(qǐng)求會(huì)在400毫秒之內(nèi)完成。否則，我們將會(huì)操作一個(gè)undefined的result。

但是有一個(gè)問(wèn)題隨著項(xiàng)目的擴(kuò)大漸漸浮現(xiàn)出來(lái)：如果場(chǎng)景需要我們多層嵌套回調(diào)函數(shù)，代碼將變得難以閱讀和維護(hù)：

ajax(url0,function(result0){
 ajax(result0.url1,function(result1){
  ajax(result1.url2,function(result2){
   console.log(result2);
  });
 });
});

（2）調(diào)用外部函數(shù)

為了解決內(nèi)聯(lián)回調(diào)函數(shù)暴露出來(lái)的代碼混亂問(wèn)題，我們引入外部函數(shù)調(diào)用來(lái)解決類(lèi)似問(wèn)題：

function handle2(result){
 console.log(result);
}
function handle1(result){
 ajax(result.url,function(result){
  handle2(result);
 });
}
ajax(url,function(result){
 handle1(result);
});

通過(guò)這種拆分內(nèi)聯(lián)函數(shù)，來(lái)調(diào)用外部函數(shù)的優(yōu)化方法，能極大的保持代碼的簡(jiǎn)潔性。

二.制定回調(diào)管理器

觀察流行的JavaScript流程控制工具，例如Nimble、Step、Seq，我們會(huì)學(xué)習(xí)到一種簡(jiǎn)潔的設(shè)計(jì)模式：通過(guò)回調(diào)管理器來(lái)控制異步JavaScript執(zhí)行流程，下面是一個(gè)典型的回調(diào)管理器的關(guān)鍵代碼示例：

var Flow={};
//設(shè)置next方法，在上一個(gè)方法完成時(shí)調(diào)用下一個(gè)方法
Flow.next=function(){
 if(this.stack[0]){
  //彈出方法棧中的第一個(gè)方法，并執(zhí)行他
  this.stack.shift()();
 }
};
//設(shè)置series方法，接收一個(gè)函數(shù)數(shù)組，并按序執(zhí)行
Flow.series=function(arr){
 this.stack=arr;
 this.next();
};

//通過(guò)Flow.series我們能夠控制傳入的函數(shù)的執(zhí)行順序
Flow.series([
  function(){
   //do something
   console.log(1);
   Flow.next();
  },
  function(next){
   //do something
   console.log(2);
   Flow.next();
  }
]);

我們初始化了一個(gè)Flow控制器，為他設(shè)計(jì)了series和next兩個(gè)函數(shù)屬性。在我們編寫(xiě)的業(yè)務(wù)方法內(nèi)部，在方法結(jié)尾處通過(guò)調(diào)用Flow.next()的方式來(lái)順序觸發(fā)下一個(gè)方法；通過(guò)執(zhí)行series方法來(lái)順序執(zhí)行異步函數(shù)。這種通過(guò)核心控制器來(lái)管理異步函數(shù)調(diào)用的方式簡(jiǎn)化了我們的編程過(guò)程，讓開(kāi)發(fā)人員能夠投入更多精力在業(yè)務(wù)邏輯上。

三.全局標(biāo)記控制

（1）簡(jiǎn)單計(jì)數(shù)器控制

也許上面介紹的異步方法仍然不能滿(mǎn)足實(shí)際開(kāi)發(fā)中的業(yè)務(wù)場(chǎng)景：假設(shè)我們有a()，b()，c()三個(gè)方法，a和b沒(méi)有依賴(lài)關(guān)系，可以異步進(jìn)行。但是c必須在a和b都完成之后才能觸發(fā)。為滿(mǎn)足這樣的邏輯實(shí)現(xiàn)，我們加入一個(gè)全局計(jì)數(shù)器來(lái)控制代碼的執(zhí)行流程：

var flag=2;
var aValue,bValue;
function a(){
 aValue=1;
 flag--;
 c();
}
function b(){
 setTimeout(function(){
  bValue=2;
  flag--;
  c();
 },200);
}
function c(){
 if(flag==0){
  console.log("after a and b:"+(aValue+bValue));
 }
}
a();
b();

我們?cè)O(shè)置了一個(gè)全局變量flag來(lái)監(jiān)控方法a和方法b的完成情況。方法b通過(guò)設(shè)置一個(gè)200毫秒的定時(shí)器來(lái)模擬網(wǎng)絡(luò)環(huán)境，最終會(huì)在b方法執(zhí)行完成之后成功調(diào)用c方法。這樣我們就實(shí)現(xiàn)了對(duì)方法a()，b()，c()的依賴(lài)調(diào)用。

（2）面向數(shù)據(jù)的控制

當(dāng)上述方案在復(fù)雜場(chǎng)景下應(yīng)用時(shí)，會(huì)出現(xiàn)如下問(wèn)題：產(chǎn)品經(jīng)過(guò)多個(gè)版本迭代，c方法依賴(lài)更多的方法，因此計(jì)數(shù)器flag需要不斷的變化；產(chǎn)品迭代過(guò)程中更換了開(kāi)發(fā)人員。當(dāng)出現(xiàn)上述兩種情況時(shí)，代碼的邏輯將會(huì)變得混亂不堪，flag標(biāo)記符是否能保持簡(jiǎn)明正確很大程度上受到了產(chǎn)品迭代的影響。因此我們提出面向數(shù)據(jù)的優(yōu)化改進(jìn)。

在真實(shí)的開(kāi)發(fā)場(chǎng)景中，存在方法依賴(lài)的原因基本都是因?yàn)榇嬖跀?shù)據(jù)依賴(lài)，對(duì)于上面那個(gè)簡(jiǎn)單的示例：c方法依賴(lài)于a方法和b方法操作的結(jié)果，而不是依賴(lài)于flag是否為0。因此我們可以通過(guò)檢查依賴(lài)方法是否已經(jīng)完成了數(shù)據(jù)處理來(lái)代替檢查標(biāo)記符是否已經(jīng)被置為0，在這個(gè)例子中也就是在c方法中檢查aValue和bValue是否已經(jīng)完成了賦值：

function c(){
 if(aValue!==undefined && bValue!==undefined){
  console.log("after a and b:"+(aValue+bValue));
 }
}

針對(duì)更加通用的場(chǎng)景，我們將上述代碼修改為下：

var checkDependency={};
var aValue,bValue;
function a(){
 aValue=1;
 checkDependency.a=true;
 c();
}
function b(){
 setTimeout(function(){
  bValue=2;
  checkDependency.b=true;
  c();
 },200);
}
function c(){
 if(checkDependency.a && checkDependency.b){
  console.log("after a and b:"+(aValue+bValue));
 }
}
a();
b();

通過(guò)面向數(shù)據(jù)的檢查方式，未來(lái)擴(kuò)展時(shí)，我們僅需要在新增的方法中增加對(duì)checkDependency對(duì)象的修改，并且在c方法中檢查相應(yīng)屬性的存在就能實(shí)現(xiàn)異步依賴(lài)方法的順序執(zhí)行。

四.ES6新增方法—Promise類(lèi)

為了解決JavaScript中異步方法的復(fù)雜性，官方引入了一種統(tǒng)一的控制方式：

var bool=false;
/*
 * 新建一個(gè)Promise實(shí)例，向構(gòu)造函數(shù)傳入一個(gè)異步執(zhí)行函數(shù)
 * 異步函數(shù)會(huì)接受兩個(gè)參數(shù)，由Promise傳入，對(duì)應(yīng)then方法中傳入的方法
 */
var promise=new Promise(function(resolve,reject){
 setTimeout(function(){
  if(bool){
   //根據(jù)執(zhí)行情況相應(yīng)調(diào)用resolve和reject
   resolve(bool);
  }else{
   reject(bool);
  }
 },200);
});
//通過(guò)then向Promise實(shí)例傳入解決方法
promise.then(function resolve(result){
 console.log("success");
},function reject(result){
 console.log("failure");
});

上例代碼展示了一個(gè)基礎(chǔ)的Promise應(yīng)用，也許實(shí)際場(chǎng)景中更加多見(jiàn)的是下面這種鏈?zhǔn)秸{(diào)用：

new Promise(function(res,rej){
 if(/*異步調(diào)用成功*/){
  res(data);
 }else{
  rej(error);
 }
}).then(function resolve(result){
 console.log("success");
},function reject(result){
 console.log("failure");
});

如果對(duì)Promise感興趣的話(huà)，可以在網(wǎng)上尋找資料繼續(xù)深入學(xué)習(xí)！

關(guān)于Promise的兼容性，通常web前端JavaScript代碼中不會(huì)直接使用Promise（通過(guò)caniuse.com網(wǎng)站查詢(xún)發(fā)現(xiàn)Android4.4不支持Promise）。如果特別想使用的，往往會(huì)在項(xiàng)目中附帶一些補(bǔ)足兼容性的promise類(lèi)庫(kù)；而后端Node.js可以放心使用Promise類(lèi)來(lái)管理異步邏輯。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論