XMLHttpRequest Wrapper？ （清理多个请求）

Question

我正在创建一个在页面上运行的脚本。这个页面有几个ajax调用，每个调用都是顺序的（如果A有效，可以调用B等）。

我的代码：

function doSomething(element) {
    var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        pageCheck(this,element);

    }
}


xhr.open('GET', URL);
xhr.responseType = 'document';
xhr.send();
} 

在pageCheck中，我传递元素（无关紧要）和通过xmlhttprequest调用获得的dom对象。在内页面检查我有另一系列的

pageCheck(page,item) {
var xhr1 = new XMLHttpRequest(); 

xhr1.onreadystatechange = function() {
if (...) {
doSomethingElse(..); 
}
xhr1.open(..)
xhr1....etc
}  

我的问题是，这看起来很糟糕。我不能为XML请求做一些包装吗？我有这个，但意识到我无法访问xhr对象。如何在没有fetch，jquery，promises等的情况下清理它？重用xhr对象？

function XMLWrapper(url) {
    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        pageCheck(this,item);

    }
}


    xhr.open('GET', url);
    xhr.responseType = 'document';
    xhr.send();    
}

Answer 1

我猜Promises会救你。虚拟代码：

function request (url) {
  return new Promise(function (resolve, reject) {
    var xhr = new XMLHttpRequest();

    //....
    //.... xhr setup
    //....

    xhr.addEventListener('load', function (e) {
      resolve(e.target.responseText)
    })

    xhr.addEventListener('error', function (e) {
      reject(new Error('some error message'));
    })

    xhr.send();
  })
}

比你可以：

request('url1')
  .then(function (data) {
    //data has the result of the first request here

    return request('url2');
  })
  .then(function (data) {
     //data has the result of the second here

   })
   .catch(function (error) {
     //if some error occurs on the way,
     //you will end up here.
   })

//and so forth

请注意，这不是虚拟代码，只是概述了使用promises解决问题的方法。关于Promises的完整解释将在很大程度上得到答案。