在for循环中同步诺言？

Question

I'm stuck with this asynchronous execution of angularjs/javascript. Please help

NOTES

Dummy API used for sample purpose.

Those Dummy API are really an AnugularJS service in real time.

I used XmlHttpRequest for demo purpose, so no need to debate on third argument being false or true.

PROBLEM

Inside for loop, calculateFormulaValue function is called and based on argument, it will call some API and get value in promised object. But for loop is getting finished before promise object gets returned and I'm not able to save the final object in rowCollection .

How we can refactor below code to get desired result ?

Code here -> 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}"

EXPECTED OUTPUT

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

Any help in achieving expecting output would be good. Thanks in advance.

Answer 1

You could return the promise that you create in calculateFormulaValue , by putting the return keyword here:

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

Do this at all places where you have this construct to make sure the function always returns the promise (or even better: try to reuse code that common to each formula -- you have a lot of code duplication there).

Then your main loop could build a new array where each element is the returned promise:

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

And now you can wait for all promises to finish with Promise.all :

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

NB: you should further improve your code to avoid the use of global variables, such as the result object currentFormulaValues .