zingcoders Ответов: 1

Как синхронизировать обещания внутри цикла for в javascript?


Всем привет,

Я застрял с этим асинхронным выполнением javascript.

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



Я использовал некоторые примеры API для этой демонстрации. нажмите кнопку Выполнить и посмотрите консоль вывода jsbin. Сохраните запуск до того, как будут сгенерированы все формулы.

JS Bin - совместная отладка JavaScript[^]


После того как я сгенерировал только все формулы, я наконец-то запихнул их в свою коллекцию строк.

Как мне этого добиться ?

Что я уже пробовал:

Я попытался создать функцию немедленного вызова внутри цикла for, как это было предложено в & lt;a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Closures" ... Н[^]

Все равно не повезло.. пожалуйста, помогите мне в этом.

1 Ответов

Рейтинг:
1

Kornfeld Eliyahu Peter

XMLHttpRequest. open () имеет 3-й параметр (и 4-й и 5-й тоже, но пока он не имеет к вам отношения), который устанавливает, должен ли вызов быть асинхронным или синхронным... Используйте его, чтобы дождаться ответов от сервера...
XMLHttpRequest. open () - веб-API | MDN[^]