다중 XMLHttpRequest를 사용하는 방법은 무엇입니까?

다중 XMLHttpRequest를 사용하는 방법은 무엇입니까?

8개의 다른 URL에서 8개의 JSON을 받아야 합니다. 변경해야 할 쿼리 문자열을 Array에 저장하고 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을 콘솔에 표시하고 싶습니다.오류는 발생하지 않지만 마지막 인덱스 항목(obs2ninjas 없음)과 함께 마지막 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);

대신, 모든 요청을 완전히 비동기식(동시 방식)으로 실행하려면 요청 변수를 루프 내에서 선언하고 범위를 지정해야 합니다.각 어레이 요소에 대해 하나의 요청이 있습니다.다음과 같은 몇 가지 가능성이 있습니다.

• 세를 써서
• 콜백 선언
• IIF 사용
• for 루프 대신 array .for Each()를 사용

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 루프 안에 포함시켜야 합니다.

또한, 아약스는 비동기식으로 실행되므로 무작위 순서로 결과를 얻을 수 있습니다.

의 가치i변수는 다음을 사용하여 선언해야 합니다.let키워드를 지정하여 블록 범위 로컬 변수를 선언합니다.

let범위가 블록으로 제한된 변수를 선언할 수 있습니다.

let폐쇄에 대한 해결책으로 항상 사용됩니다.

또한 사용할 수 있습니다.array저장할 수 있는 위치XMLHttpRequest.

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

언급URL : https://stackoverflow.com/questions/46503558/how-to-use-multiple-xmlhttprequest