Как сделать в promise двойной ответ?

Question

[SheikhRamil]

подскажите как сделать xhr1 тоже приходил ответ? как promise сделать это? приходить только первый ответ, и на второй вызов отправляет первй ответ

let myPromise = new Promise(function(myResolve, myReject) {
        let xhr = new XMLHttpRequest();
        let xhr1 = new XMLHttpRequest();

        xhr.open(`GET`, `style.css`);
        xhr1.open(`GET`, `xmlData.html`);

        xhr.onload = function () {
            if (xhr.status === 200 && xhr.readyState === 4) {
                myResolve(xhr.responseText);
            }
            else {
                myReject("Error");
            }
        }
        xhr1.onload = function () {
            if (xhr1.status === 200 && xhr1.readyState === 4) {
                myResolve(xhr1.responseText);
            }
            else {
                myReject("Error");
            }
        }
        xhr.send();
        xhr1.send();
    });

    myPromise.then(
        function(value) {console.log(value);}
    );
    myPromise.then(
        function(secondValue) {console.log(secondValue);}
    );

    myPromise.catch(
        function (error) {
            console.log(error);
        }
    )
    myPromise.catch(
        function (error) {
            console.log(error);
        }
    )

Answer 1

[Aetae]

Два асинхронных действия - два промиса, по одному на каждое. Объеденить же несколько потом можно через Promise.all:

function XMLHttpPromise(method, url, data) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.onload = () => {
      if (xhr.status === 200 && xhr.readyState === 4) 
        resolve(xhr.responseText);
      else 
        reject("Error");
    }
    xhr.onerror = xhr.ontimeout = reject;
    xhr.send(data);
  })
}

Promise.all([
  XMLHttpPromise('GET', `style.css`),
  XMLHttpPromise('GET', `xmlData.html`)
]).then(([value, secondValue]) => {
  console.log(value);
  console.log(secondValue);
}).catch(console.error);

Answer 2

[Alex]

1. Выбросьте XMLHttpRequest
   
2. Используйте fetch
   

3. Promise.all([fetch(`style.css`), fetch(`xmlData.html`)]).then( ... оба запроса завершены )

   
   

Comments

[Aetae]

... оба запроса завершены

Если придираться - то на самом деле не завершены, а только получен ответ.)

[Kostya10295]

Чем XMLHttpRequest плох?

[Ярослав Иванов]

Kostya10295, Ничем. Это просто для другого. Например при загрузке файла через XMLHttpRequest можно отслеживать процент загрузки файла. fetch такого не умеет.

[Aetae]

Ярослав Иванов, ещё fetch не умеет в кодировки. Также он не умеет в xml.
Зато умеет в json. И в стримы, но толком стримы пока не работают нигде...

[reinmaker90]

Alex Подскажите пож-та как в таком примере из массива завершенных запросов body,json() сделать что бы получить данные ?

Promise.all([fetch(`style.css`), fetch(`xmlData.html`)]).then( ... оба запроса завершены )

[Alex]

reinmaker90,

Promise.all([fetch(`style.css`), fetch(`xmlData.html`)])
.then(([body1, body2]) => Promise.all([ body1.json(), body2.json() ]) )
.then(([json1, json2]) => { ... })

[reinmaker90]

Alex, как хитро, спасибо!