XMLHttpRequestラッパー？ （複数のリクエストをクリーンアップ）

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オブジェクトにアクセスできないことを認識しました。フェッチ、jquery、約束などを使わずにこれをどのようにクリーンアップできますか？ 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

私はここで約束すると思います。ダミーコード：

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 

してくださいではない、これは1が約束して、あなたの問題を解決する可能性があります方法の概要を説明するだけであり、ダミーのコードであること。約束についての完全な説明は、ここでの回答のためのものです。