[英]How to use multiple XMLHttpRequest?
我需要從 8 個不同的 URL 獲取 8 個 JSON。 我將必須更改的查詢字符串存儲在一個數組中,並使用 for 循環遍歷它。 這是我的代碼:
var index = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
var request = new XMLHttpRequest();
for (var i = 0; i < index.length; i++) {
var url = "https://wind-bow.glitch.me/twitch-api/channels/" + index[i];
request.open("GET", url);
request.onload = function() {
var data = JSON.parse(request.responseText);
console.log(data);
}
request.send();
}
到目前為止,我只想在控制台上顯示每個 JSON。 我沒有收到任何錯誤,但我只能顯示帶有最后一個索引項 (noobs2ninjas) 的最后一個 JSON。
有人可以解釋我為什么嗎? 我如何獲得我需要的所有 JSON?
謝謝
誰能解釋一下為什么? 我如何獲得我需要的所有JSON?
要發送第二個請求,您需要等待第一個請求完成。 因此,如果您有興趣以數組順序獲取響應,則可以在每個數組元素上循環,並且只有在獲得響應時,您才可以循環其余元素:
var index = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]; var request = new XMLHttpRequest(); (function loop(i, length) { if (i>= length) { return; } var url = "https://wind-bow.glitch.me/twitch-api/channels/" + index[i]; request.open("GET", url); request.onreadystatechange = function() { if(request.readyState === XMLHttpRequest.DONE && request.status === 200) { var data = JSON.parse(request.responseText); console.log('-->' + i + ' id: ' + data._id); loop(i + 1, length); } } request.send(); })(0, index.length);
相反,如果要完全異步(以並發方式)執行所有請求,則必須在循環內聲明和限定請求變量。 每個數組元素一個請求 。 你有一些可能性:
var index = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]; for (var i = 0; i < index.length; i++) { var url = "https://wind-bow.glitch.me/twitch-api/channels/" + index[i]; let request = new XMLHttpRequest(); request.open("GET", url); request.onreadystatechange = function() { if(request.readyState === XMLHttpRequest.DONE && request.status === 200) { var data = JSON.parse(request.responseText); console.log('-->' + data._id); } } request.send(); }
根據@Wavesailor評論,為了在調用結束時進行數學計算:
var index = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]; var request = new XMLHttpRequest(); (function loop(i, length, resultArr) { if (i>= length) { console.log('Finished: ---->' + JSON.stringify(resultArr)); return; } var url = "https://wind-bow.glitch.me/twitch-api/channels/" + index[i]; request.open("GET", url); request.onreadystatechange = function() { if(request.readyState === XMLHttpRequest.DONE && request.status === 200) { var data = JSON.parse(request.responseText); console.log('-->' + i + ' id: ' + data._id); resultArr.push(data._id); loop(i + 1, length, resultArr); } } request.send(); })(0, index.length, []);
問題是你申報了
var request = new XMLHttpRequest();
在for
循環之外。 所以你只實例一個請求。
你必須將它包含在for循環中。
另外,不要忘記ajax是異步執行的,因此您將以隨機順序獲取結果。
必須使用let
關鍵字聲明i
變量的值,以聲明塊范圍局部變量。
let
允許您聲明范圍受限於塊的變量。
let
總是用作閉包的解決方案。
此外,您可以使用可以存儲XMLHttpRequest
的array
。
var index = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]; requests=new Array(index.length); for (let i = 0; i < index.length; i++) { var url = "https://wind-bow.glitch.me/twitch-api/channels/" + index[i]; requests[i] = new XMLHttpRequest(); requests[i].open("GET", url); requests[i].onload = function() { var data = JSON.parse(requests[i].responseText); console.log(data); } requests[i].send(); }
您可能也更喜歡使用Fetch API代替XMLHttpRequest
。 然后你要做的就是利用一些Promise.all()
函數。
var index = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"], url = "https://wind-bow.glitch.me/twitch-api/channels/", proms = index.map(d => fetch(url+d)); Promise.all(proms) .then(ps => Promise.all(ps.map(p => p.json()))) // p.json() also returns a promise .then(js => js.forEach((j,i) => (console.log(`RESPONSE FOR: ${index[i]}:`), console.log(j))));
.as-console-wrapper { max-height: 100% !important; }
我剛才有同樣的問題。 只需使用“this.responseText”而不是“request.responseText”。 而已。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.