如何在javascript中同步for循环中的promises？ [英] How do I synchronize promises inside for loop in javascript?
问题描述
大家好，
我坚持使用javascript的异步执行。
< pre lang =Javascript> var rowCollection = [];
var headerCollection = [ Formula 1 ， 公式2， 公式3， 公式4， 公式5， 公式6， 公式7];
var currentFormulaValues = {};
// var finalCollection =
function generate（）{
for （ var i = 0 ; i< headerCollection.length; i ++）{
calculateFormulaValue（i，headerCollection [i]）;
console .log（ 当前索引 + i + - > + headerCollection [i]）;
}
}
function calculateFormulaValue（j，currentFormula）{
// 一些需要运行的常用代码..
if （currentFormula == Formula 1 ）{
var promise = new 承诺（ function （解决，拒绝）{
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（错误（request.statusText））;
}
};
request.onerror = function （）{reject（错误（'' < span class =code-string>获取数据时出错。'））;
};
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 （错误）{
console .log（' 承诺被拒绝。'）;
}）;
}
else if （currentFormula == 公式2）{
var promise = new 承诺（ function （解析，拒绝）{
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（错误（request.statusText））;
}
};
request.onerror = function （）{reject（错误（'' < span class =code-string>获取数据时出错。'））;
};
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）））;
}，函数（错误）{
console .log（' 承诺被拒绝。'）;
}）;所有其他公式的
}
//
其他 {
var promise = new 承诺（ function （解决，拒绝）{
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（错误） （request.statusText））;
}
};
request.onerror = function （）{reject（错误（'' < span class =code-string>获取数据时出错。'））;
};
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 （错误）{
console .log（' 承诺被拒绝。'）;
}）;
}
if （j == headerCollection.length-1）{
console .log（ SAVE FINAL）
rowCollection.push（currentFormulaValues）;
console .log（ JSON .stringify（currentFormulaValues））
}
}
我在这个演示中使用了一些示例API。单击运行并查看jsbin输出控制台。在生成所有公式之前保存运行。
JS Bin - Collaborative JavaScript调试 [ ^ ]
我生成了所有公式之后我终于把它推进了我的行集。
我如何实现这个目标？
我尝试过：
我尝试在for循环中创建立即调用函数，如< a href =https://developer.mozilla.org/en/docs/Web/JavaScript/Closures所示.N [ ^ ]
仍然没有运气..请帮忙。
XMLHttpRequest.open（）有第3个参数（第4和第5个参数，但它是那个与你无关的那个）设置调用是异步还是同步...用它等待来自服务器的答案...
XMLHttpRequest.open（） - Web API | MDN [ ^
Hi all,
I'm stuck with this asynchronous execution of 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))
}
}
I used some sample API for this demo. click run and see jsbin output console. Save running before all formulas are generated.
JS Bin - Collaborative JavaScript Debugging[^]
After I have generated all formulas only I have push it into my row collection finally.
How do I achieve this ?
What I have tried:
I tried create Immediate invoking function inside for loop as suggested on <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Closures".. N[^]
Still no luck.. please help on this.
XMLHttpRequest.open() has a 3rd parameter (and 4th and 5th too, but it is irrelevant to you for now), that sets if the call should be asynchronous or synchronous... Use it to wait for the answers from the server...
XMLHttpRequest.open() - Web APIs | MDN[^]
这篇关于如何在javascript中同步for循环中的promises？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
