Обработка асинхронных запросов с ES6

Question

Я пытаюсь отправить несколько запросов асинхронно, но только один из них заканчивается - все остальные имеют xmlhttp.status == 0 и xmlhttp.readyState == 1 в течение всего времени, четыре раза каждый.

Что случилось?

У меня есть два файла: Api.js и Ajax.js. Api посылает запросы, используя Ajax:

Api.js:

import Ajax from './Ajax'; 

class Api { 

    returnData (success, failure) { 
     var params = { 
      methodId: this.ids.returnData, 
      requestBody: {} 
     }; 
     this.sendRequest(params, success, failure); 
    }; 

    sendRequest (data, success, failure) { 
     Ajax.execute(function (response) { 
      success(response); // simplified 
     }); 
    }; 

} 

export default new Api(); 

Ajax.js:

class Ajax { 

    createXmlHttp() { 
     if (window.XMLHttpRequest) { 
      this.xmlhttp = new XMLHttpRequest(); 
     } else { 
      this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
    }; 

    onreadystatechange (action, data) { 
     this.xmlhttp.onreadystatechange = function() { 
      if (this.xmlhttp.readyState === 4) { 
       if (this.xmlhttp.status === 200) { 
        action(this.xmlhttp.responseText); 
       } 
      } 
     }.bind(this); 
    }; 

    execute (action, url, data) { 
     this.createXmlHttp(); 
     this.onreadystatechange(action, data); 
     this.xmlhttp.open("POST", url, true); 
     this.xmlhttp.setRequestHeader("Content-Type", "text/plain"); 
     this.xmlhttp.send(data); 
    }; 

}; 

export default new Ajax(); 

Answer 1

Вы только когда-либо создать один экземпляр вашего объекта Ajax.

Каждый раз, когда вы звоните Ajax.execute, вы перезаписать this.xmlhttp = new XMLHttpRequest();

Вам нужен новый экземпляр Ajax для каждого запроса.

export default new Ajax(); 

Не создавать экземпляр там:

export default Ajax; 

... создать его, когда вам нужен новый объект.

sendRequest (data, success, failure) { 
    new Ajax.execute(function (response) {