[英]JavaScript Wait until all async calls finish
我需要一些帮助来处理 JavaScript 中的异步调用。 我有一个 for 循环,每个循环调用一个异步 HttpRequest,并将其响应添加到一个数组中。 我希望程序在没有 jQuery(仅用于 DOM 操作)的情况下继续之前等待所有异步调用完成。 我已经搜索了相当多的解决方案,但没有一个真正有效的没有大量改变我的代码或依赖 jQuery。
function httpGet(theUrl, callback) {
var xmlRequest = new XMLHttpRequest();
xmlRequest.onreadystatechange = function() {
if (xmlRequest.readyState == 4 && xmlRequest.status == 200) {
callback(xmlRequest.responseText);
}
}
xmlRequest.open("GET", theUrl, true);
xmlRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlRequest.setRequestHeader("Accept", "application/json");
xmlRequest.send(null);
}
$(document).ready(function() {
var channels = ["freecodecamp", "storbeck", "terakilobyte", "habathcx","RobotCaleb","thomasballinger","noobs2ninjas","beohoff"];
var urls = channels.map((x) => "https://api.twitch.tv/kraken/channels/" + x);
var data = [];
(function(urls, data) {
urls.forEach(function(url) {
function(resolve, reject) {
httpGet(url, function(response) {
data.push(JSON.parse(response));
})
};
})
})(urls, data);
// Continue after all async calls are finished
})
更新:使用 Promise 进行编辑,但仍然无法正常工作,也许我做错了什么。
function httpGet(theUrl, callback) {
return new Promise(function(resolve, reject) {
var xmlRequest = new XMLHttpRequest();
xmlRequest.onreadystatechange = function() {
if (xmlRequest.readyState == 4 && xmlRequest.status == 200) {
callback(xmlRequest.responseText);
}
}
xmlRequest.open("GET", theUrl, true);
xmlRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlRequest.setRequestHeader("Accept", "application/json");
xmlRequest.send(null);
})
}
$(document).ready(function() {
var channels = ["freecodecamp", "storbeck", "terakilobyte", "habathcx","RobotCaleb","thomasballinger","noobs2ninjas","beohoff"];
var urls = channels.map((x) => "https://api.twitch.tv/kraken/channels/" + x);
var data = [];
var promises = [];
(function(urls, data) {
urls.forEach(function(url) {
var promise = httpGet(url, function(response) {
data.push(JSON.parse(response));
});
promises.push(promise);
})
Promise.all(promises).then(function() {
console.log(data);
})
})(urls, data);
})
对于 Promise,您不应该使用callback
参数。 改为从reject
调用resolve
/ reject
函数。
不要将回调传递给调用,而是将您想要做的事情与.then
处理程序中的承诺结果链接起来。
function httpGet(theUrl) {
return new Promise(function(resolve, reject) {
var xmlRequest = new XMLHttpRequest();
xmlRequest.onreadystatechange = function() {
if (xmlRequest.readyState == 4) {
if (xmlRequest.status == 200)
resolve(xmlRequest.responseText);
// ^^^^^^^
else
reject(new Error(xmlRequest.statusText)); // or something
}
}
xmlRequest.open("GET", theUrl, true);
xmlRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlRequest.setRequestHeader("Accept", "application/json");
xmlRequest.send(null);
});
}
$(document).ready(function() {
var channels = ["freecodecamp", "storbeck", "terakilobyte", "habathcx", "RobotCaleb", "thomasballinger", "noobs2ninjas", "beohoff"];
var urls = channels.map((x) => "https://api.twitch.tv/kraken/channels/" + x);
var promises = urls.map(function(url) {
// ^^^ simpler than forEach+push
var promise = httpGet(url); // <-- no callback
return promise.then(JSON.parse);
});
Promise.all(promises).then(function(data) {
// ^^^^
console.log(data);
});
})
由于您使用的是 jQuery,您可以使用延迟对象来链接承诺。
收集所有承诺并使用$.when
和 spread 运算符来等待所有承诺解决。 您可以使用then
在解决所有 ajax 请求后运行一个函数。
ES5 示例
$(document).ready(function () { var channels = ["freecodecamp", "storbeck", "terakilobyte", "habathcx", "RobotCaleb", "thomasballinger", "noobs2ninjas", "beohoff"]; var urls = channels.map(function (x) { return "https://api.twitch.tv/kraken/channels/" + x; }); var data = []; var promises = urls.map(function (url) { return $.get(url).then(function (response) { data.push(response); }); }); $.when.apply($, promises).then(function () { console.log('done', data); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
ES6 示例
$(document).ready(function() { var channels = ["freecodecamp", "storbeck", "terakilobyte", "habathcx","RobotCaleb","thomasballinger","noobs2ninjas","beohoff"]; var urls = channels.map((x) => "https://api.twitch.tv/kraken/channels/" + x); var data = []; var promises = urls.map((url) => $.get(url).then((response) => { data.push(response); })); $.when(...promises).then(function() { console.log('done', data); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
难道不能通过将 ajax 请求的计数作为一个变量来完成:
var urls_count, data_count = 0;
function httpGet(theUrl, callback, onComplete) {
var xmlRequest = new XMLHttpRequest();
xmlRequest.onreadystatechange = function() {
if (xmlRequest.readyState == 4 && xmlRequest.status == 200) {
callback(xmlRequest.responseText);
}
if(xmlRequest.readyState == 4){
data_count += 1
if(urls_count == data_count){
//this is called when all ajax calls complete
onComplete();
}
}
}
xmlRequest.open("GET", theUrl, true);
xmlRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlRequest.setRequestHeader("Accept", "application/json");
xmlRequest.send(null);
}
$(document).ready(function() {
var channels = ["freecodecamp", "storbeck", "terakilobyte", "habathcx","RobotCaleb","thomasballinger","noobs2ninjas","beohoff"];
var urls = channels.map((x) => "https://api.twitch.tv/kraken/channels/" + x);
var data = [];
urls_count = urls.length;
var onComplete = function(){
//your code after all ajax completes.
}
(function(urls, data) {
urls.forEach(function(url) {
function(resolve, reject) {
httpGet(url, function(response) {
data.push(JSON.parse(response));
}, onComplete)
};
})
})(urls, data);
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.