javascript全域標記控制與Promise類別用法實例詳解

全域標記控制

（1）簡單計數器控制

也許上面介紹的非同步方法仍然無法滿足實際開發中的業務場景：假設我們有a ()，b()，c()三個方法，a和b沒有依賴關係，可以非同步進行。但是c必須在a和b都完成之後才能觸發。為滿足這樣的邏輯實現，我們加入一個全域計數器來控製程式碼的執行流程：

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

我們設定了一個全域變數flag來監控方法a和方法b的完成情況。方法b透過設定200毫秒的計時器來模擬網路環境，最終會在b方法執行完成之後成功呼叫c方法。這樣我們就實作了對方法a()，b()，c()的依賴呼叫。

（2）面向資料的控制

當上述方案在複雜場景下應用時，會出現以下問題：產品經過多個版本迭代，c方法依賴更多的方法，因此計數器flag需要不斷的變化；產品迭代過程中更換了開發人員。當出現上述兩種情況時，程式碼的邏輯將會變得混亂不堪，flag標記符是否能保持簡潔正確很大程度上受到了產品迭代的影響。因此我們提出面向數據的最佳化改進。

在真實的開發場景中，存在方法依賴的原因基本上都是因為存在資料依賴，對於上面那個簡單的範例：c方法依賴a方法和b方法操作的結果，而不是依賴flag是否為0。因此我們可以透過檢查依賴方法是否已經完成了資料處理來取代檢查標記符是否已經被置為0，在這個例子中也就是在c方法中檢查aValue和bValue是否已經完成了賦值：

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

針對更通用的場景，我們將上述程式碼修改為下：

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

透過面向資料的檢查方式，未來擴充時，我們只需要在新增的方法中增加對checkDependency物件的修改，並且在c方法中檢查對應屬性的存在就能實現非同步依賴方法的順序執行。

Promise類別

為了解決JavaScript中非同步方法的複雜性，官方引入了統一的控制方式：

var bool=false;
/*
 * 新建一个Promise实例，向构造函数传入一个异步执行函数
 * 异步函数会接受两个参数，由Promise传入，对应then方法中传入的方法
 */
var promise=new Promise(function(resolve,reject){
 setTimeout(function(){
  if(bool){
   //根据执行情况相应调用resolve和reject
   resolve(bool);
  }else{
   reject(bool);
  }
 },200);
});
//通过then向Promise实例传入解决方法
promise.then(function resolve(result){
 console.log("success");
},function reject(result){
 console.log("failure");
});

上例程式碼展示了一個基礎的Promise應用，也許實際場景中更加多見的是下面這種鍊式調用：

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

以上是javascript全域標記控制與Promise類別用法實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！