Vanilla JavaScript асинхронный множественный xhr.open () - PullRequest
Новая
       24

Vanilla JavaScript асинхронный множественный xhr.open ()

0 голосов
/ 21 марта 2019

Я хотел бы знать, как обрабатывать множественные запросы xhr с помощью vanilla JS.Я хочу открыть несколько 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 = new XMLHttpRequest() объектов, чтобы я мог запустить несколько .open()?

Спасибо

1 Ответ

1 голос
/ 21 марта 2019

Вы используете одну переменную, чтобы определить запрос xhr, и используете эту переменную дважды, переопределяя переменную во второй раз.Вам нужно создать цикл и использовать let xhr; вместо var xhr, так как let имеет область видимости блока, поэтому каждый экземпляр в цикле будет определен независимо.

т.е. что-то вроде 

// 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();
}
...