Как сделать несколько XMLHttpRequest для формы JSON в другом месте?

Question

Я пытаюсь сделать несколько XMLHttpRequest в Javascript - с двумя разными URL-адресами.Цель состоит в том, чтобы сохранить каждый ответ в переменной и работать со всеми из них.

На самом деле, я делаю это так, есть ли элегантный способ сделать это?

var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', 'http://website-one.com/FIRST.json');
ourRequest.onload = function() {
    var  Data_One = JSON.parse(ourRequest.responseText);
    call_second(Data_One);
};
ourRequest.send();

function call_second(Data_From_One) {
    var ourRequest_TWO = new XMLHttpRequest();
    ourRequest_TWO.open('GET', 'http://website-two.com/second.json');
    ourRequest_TWO.onload = function() {
        var  Data_TWO = JSON.parse(ourRequest_TWO.responseText);
        work_with_them(Data_From_One, Data_Two);
};
ourRequest_TWO.send();

function work_with_them(data_one, data_two) {
    //do my work
}

Answer 1

Да, есть более элегантный способ.Основная идея - «не повторяйся».

function doXHR(url, callback) {
  var xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function(event) {
    // XMLHttpRequest.DONE === 4
    if (this.readyState === XMLHttpRequest.DONE) {
      if (this.status === 200) {
        return callback(null, this.responseText);
      } else {
        return callback({errCode: this.status, errMsg: this.statusText});
      }
    }
  };

  xhr.open('GET', url, true);
  xhr.send(null);
}


doXHR('http://website-one.com/FIRST.json', function(errFirst, responseFirst) {
  if (errFirst) {
    throw new Error('Something bad happened : ' + errFirst.errCode + '/' + errFirst.errMsg); 
  }
  return doXHR('http://website-two.com/second.json', function(errSecond, responseSecond) {
    if (errSecond) {
      throw new Error('Something bad happened : ' + errSecond.errCode + '/' + errSecond.errMsg); 
    }
    return work_with_them(responseFirst, responseSecond);
  });
});

Answer 2

Ну, есть еще много чего вы можете использовать.Вы можете использовать Promise и Promise.all или использовать fetch, который прост для чтения и понимания.

Fetch API предоставляет интерфейс длявыборка ресурсов (в том числе через сеть).

Итак, наконец, ваш код будет выглядеть примерно так (если вы используете опцию fetch)

fetch('http://example.com/movies.json')
    .then(function(data_one) {
        fetch('http://example2.com/movies.json')
            .then(function(data_two) {
                function work_with_them(data_one, data_two)
            })
    })

Answer 3

Promise.all должно помочь вам в достижении цели

let moviesPromise = fetch('http://example.com/movies.json')

let booksPromise = fetch('http://example.com/books.json')


Promise
.all([moviesPromise, booksPromise])
.then((data) =>  {

  console.log(data[0]); // movies
  console.log(data[1]); // books


});

Answer 4

Нет, при использовании XMLHtpRequest не существует более простого способа: вы можете использовать другие библиотеки (Ajax) или использовать более новые API javascript, такие как Promises и async / await дляиметь более чистый код и более читаемый код.

Реорганизованный код будет:

const chainedFunction = async () => {
   const firstResult = await ourRequest();
   const second = await call_second(firstResult);
   // do some magic
};