forループ内で約束を同期させますか？

Question

私はこの非同期実行のangularjs/javascriptがついていません。サンプル目的のために使用される

NOTES

ダミーAPIを助けてください。

これらのダミーAPIは、実際にはリアルタイムでAnugularJSサービスです。

デモ用にXmlHttpRequestを使用しましたので、3番目の引数が偽であるか真であるかについて議論する必要はありません。

PROBLEM

ループのために、calculateFormulaValue関数が呼び出されると、引数に基づいて内部では、それはいくつかのAPIを呼び出すと約束したオブジェクトの値を取得します。しかし、約束事オブジェクトが返される前に、forループが終了しており、最終オブジェクトをrowCollectionに保存できません。

希望の結果を得るために、以下のコードをどのようにリファクタリングすることができますか？ここ

コード - >https://jsbin.com/xocisivuro/edit?js,console

CODE

var rowCollection = []; 
var headerCollection = ["Formula 1", "Formula 2", "Formula 3", "Formula 4", "Formula 5", "Formula 6", "Formula 7"]; 
var currentFormulaValues = {}; 
//var finalCollection = 
function generate(){ 

    for(var i=0;i<headerCollection.length;i++){ 

     calculateFormulaValue(i,headerCollection[i]); 
     console.log("current index" +i + " -->" +headerCollection[i]); 


    } 
} 

function calculateFormulaValue(j,currentFormula){ 

    //Some common code which need to run .. 

    if(currentFormula == "Formula 1"){ 
     var promise = new Promise(function(resolve, reject) { 
     var request = new XMLHttpRequest(); 

     request.open('GET', 'https://api.icndb.com/jokes/random'); 
     request.onload = function() { 
      if (request.status == 200) { 
      resolve(request.response); 
      } else { 

      reject(Error(request.statusText)); 
      } 
     }; 

     request.onerror = function() {reject(Error('Error fetching data.')); 
     }; 

     request.send(); 
     }); 

     promise.then(function(data) { 

     currentFormulaValues[currentFormula] = JSON.parse(data).value.id; 
     //rowCollection[j] = JSON.parse(data).value.id; 

     console.log("j - " + j +" ->" + (JSON.stringify(currentFormulaValues))); 
     }, function(error) { 
     console.log('Promise rejected.'); 
     }); 
    } 

    else if(currentFormula == "Formula 2"){ 
     var promise = new Promise(function(resolve, reject) { 
     var request = new XMLHttpRequest(); 

     request.open('GET', 'https://api.icndb.com/jokes/random'); 
     request.onload = function() { 
      if (request.status == 200) { 
      resolve(request.response); 
      } else { 

      reject(Error(request.statusText)); 
      } 
     }; 

     request.onerror = function() {reject(Error('Error fetching data.')); 
     }; 

     request.send(); 
     }); 

     promise.then(function(data) { 
     currentFormulaValues[currentFormula] = JSON.parse(data).value.id; 
     //rowCollection[j] = JSON.parse(data).value.id; 
     console.log("j - " + j +" ->" + (JSON.stringify(currentFormulaValues))); 

     }, function(error) { 
     console.log('Promise rejected.'); 
     }); 
    } 

    // for all other formulas 

    else{ 
     var promise = new Promise(function(resolve, reject) { 
     var request = new XMLHttpRequest(); 

     request.open('GET', 'https://api.icndb.com/jokes/random'); 
     request.onload = function() { 
      if (request.status == 200) { 
      resolve(request.response); 
      } else { 

      reject(Error(request.statusText)); 
      } 
     }; 

     request.onerror = function() {reject(Error('Error fetching data.')); 
     }; 

     request.send(); 
     }); 

     promise.then(function(data) { 

     currentFormulaValues[currentFormula] = JSON.parse(data).value.id; 
     //rowCollection[j] = JSON.parse(data).value.id; 
     console.log("j - " + j +" ->" + (JSON.stringify(currentFormulaValues))); 

     }, function(error) { 
     console.log('Promise rejected.'); 
     }); 

    } 

    if(j == headerCollection.length-1){ 
     console.log("SAVE FINAL") 
     rowCollection.push(currentFormulaValues); 
     console.log(JSON.stringify(currentFormulaValues)) 
     } 
} 

CURRENT OUTPUT

"current index0 -->Formula 1" 
"current index1 -->Formula 2" 
"current index2 -->Formula 3" 
"current index3 -->Formula 4" 
"current index4 -->Formula 5" 
"current index5 -->Formula 6" 
"SAVE FINAL" 
"{}" 
"current index6 -->Formula 7" 
"j - 0 ->{\"Formula 1\":98}" 
"j - 1 ->{\"Formula 1\":98,\"Formula 2\":175}" 
"j - 2 ->{\"Formula 1\":98,\"Formula 2\":175,\"Formula 3\":523}" 
"j - 3 ->{\"Formula 1\":98,\"Formula 2\":175,\"Formula 3\":523,\"Formula 4\":399}" 
"j - 4 ->{\"Formula 1\":98,\"Formula 2\":175,\"Formula 3\":523,\"Formula 4\":399,\"Formula 5\":119}" 
"j - 5 ->{\"Formula 1\":98,\"Formula 2\":175,\"Formula 3\":523,\"Formula 4\":399,\"Formula 5\":119,\"Formula 6\":261}" 
"j - 6 ->{\"Formula 1\":98,\"Formula 2\":175,\"Formula 3\":523,\"Formula 4\":399,\"Formula 5\":119,\"Formula 6\":261,\"Formula 7\":164}" 

期待される出力

"current index0 -->Formula 1" 
"j - 0 ->{\"Formula 1\":98}" 

"current index1 -->Formula 2" 
"j - 1 ->{\"Formula 1\":98,\"Formula 2\":175}" 

"current index2 -->Formula 3" 
"j - 2 ->{\"Formula 1\":98,\"Formula 2\":175,\"Formula 3\":523}" 

"current index3 -->Formula 4" 
"j - 3 ->{\"Formula 1\":98,\"Formula 2\":175,\"Formula 3\":523,\"Formula 4\":399}" 

"current index4 -->Formula 5" 
"j - 4 ->{\"Formula 1\":98,\"Formula 2\":175,\"Formula 3\":523,\"Formula 4\":399,\"Formula 5\":119}" 

"current index5 -->Formula 6" 
"j - 5 ->{\"Formula 1\":98,\"Formula 2\":175,\"Formula 3\":523,\"Formula 4\":399,\"Formula 5\":119,\"Formula 6\":261}" 

"current index6 -->Formula 7" 
"j - 6 ->{\"Formula 1\":98,\"Formula 2\":175,\"Formula 3\":523,\"Formula 4\":399,\"Formula 5\":119,\"Formula 6\":261,\"Formula 7\":164}" 


//if j == headerCollection.length-1, then.. 

"SAVE FINAL" // then do ... rowCollection.push(currentFormulaValues); 

期待される出力を達成するための助けがあればよいでしょう。前もって感謝します。

Answer 1

あなたがここにreturnキーワードを置くことによって、あなたはcalculateFormulaValueで作成する約束を返すことができます：

return promise.then(function(data) { // ... etc 

は、関数が常に約束を返すことを確認するためにあなたがこの構造を持っているすべての場所でこれを行います（またはより良い：各式に共通のコードを再利用しよう - コードの重複が多い）。

次に、あなたのメインループは、各要素は返さ約束である新しい配列構築することができ：

var promises = headerCollection.map(function (collection, i) { 
    console.log("current index" +i); 
    // return(!) the promise you get from each call. This will become 
    // an element in a new array, returned by *map*. 
    return calculateFormulaValue(i, collection); 
}); 

そして今、あなたはPromise.allで終了するすべての約束のために待つことができます：

Promise.all(promises).then(function() { 
    // now your object is available. 
}); 

NBを：結果オブジェクトなどのグローバル変数の使用を避けるためにコードをさらに改善する必要がありますcurrentFormulaValues。