香草JavaScript异步多个xhr.open()

香草JavaScript异步多个xhr.open(),javascript,ajax,asynchronous,xmlhttprequest,ecmascript-5,Javascript,Ajax,Asynchronous,Xmlhttprequest,Ecmascript 5,我想知道如何使用vanilla JS处理多个xhr请求。我想打开多个html模板,并在所有模板都准备好后加载页面。当我使用少量xhr.open请求时,它将只返回1个模板: var xhr = new XMLHttpRequest(); xhr.onload = function() { if(xhr.status === 200){ storage.append(xhr.responseText); } } function getAsync(url) {

我想知道如何使用vanilla JS处理多个xhr请求。我想打开多个html模板,并在所有模板都准备好后加载页面。当我使用少量xhr.open请求时,它将只返回1个模板:

var xhr = new XMLHttpRequest();
xhr.onload = function() {
    if(xhr.status === 200){
        storage.append(xhr.responseText);
    }
}
function getAsync(url) {
    xhr.open('get', url);
    xhr.send();
}
getAsync('localhost:3000/template1.html');
getAsync('localhost:3000/template2.html');
我明白,open一次只能工作1次。 那么,是可以异步加载所有teamplates,还是应该在同步事件中一个接一个地加载?另外,我想知道是否应该创建多个xhr=newXMLHttpRequest对象,以便运行多个.open


谢谢

您使用一个变量来定义xhr请求,并使用该变量两次,从而第二次重写该变量。您需要创建一个循环并使用let xhr;与var xhr不同,let有一个块作用域,因此循环中的每个实例都将独立定义

i、 例如

// Create iterable list of URLS
let urls = ['localhost:3000/template1.html', 'localhost:3000/template2.html'];

// Loop through URLs and perform request
for(let i=0; i<urls.length; i++) {
    let xhr = new XMLHttpRequest();

    xhr.onload = function() {
        if(xhr.status === 200){
            storage.append(xhr.responseText);
        }
    }

    xhr.open('get', urls[i]);
    xhr.send();
}

谢谢你的回答。哦,好的,这意味着对于每个并发请求,我都需要创建一个新的xhr对象。还有一个问题。xhr使用后是否自行处理?或者我应该手动从内存中释放它吗?JavaScript应该自动处理已用对象的处理-它有内置的垃圾收集,所以不需要做任何事情。谢谢我要试一试。