我可以“排队” XMLHttpRequest函数吗？

Question

我需要获取可用文件（存储在目录中）和已处理文件（存储在数据库表中）的列表。

我有一些JavaScript，它们调用Python脚本并将其（JSON）输出解析为一个对象。 无论Python是处理目录文件还是数据库表，这都很好地工作。

function runGetList() {
    // request external Python script (output in JSON)
    var handleResponse = function(status, response) {
        // save JSON-from-Python as an object
        var jsonMDBList = xhr.response;
        // do stuff with the object data (build select box, build table)
    }
    var handleStateChange = function() {
        switch (xhr.readyState) {
            case 0: break; // uninitialized
            case 1: break; // loading
            case 2: break; // loaded
            case 3: break; // interactive
            case 4: // completed
                handleResponse(xhr.status, xhr.response);
                break;
            default: alert("unspecified error");
        }
    }
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = handleStateChange;
    xhr.open("GET", "python/GetListMDBs.py", true);
    xhr.responseType = "json";
    xhr.send();
}

但是，我现在到达了一个位置，我将拥有多个对象（例如，来自GetListMDBs.py一个，来自GetTable.py一个），并将它们列出在最终HTML的不同部分中。 我最初的想法是使runGetList()成为一个通用函数，可以使用我需要的特定Python脚本的参数进行调用。

function getAllLists() {
    var mdbListAll = runGetList('GetListMDBs.py');
    console.log("list mdbs: " + mdbListAll);
    var mdbListTbl = runGetList('GetTable.py');
    console.log("table mdbs: " + mdbListAll);
}
function runGetList(filename) {
    // etc.
}

这可以正确执行并从各个Python脚本获取对象。 但是getAllLists()函数不会等待return ed对象，它会一直运行并记录list mdbs: undefined 。

我可以改变我的方法，因此脚本等待每个HTTP请求完成之后再移到下一个请求（并对输出进行处理）？ 我想到的唯一变通办法是一个更大，更复杂的JSON对象，该对象具有要嵌入的所有列表，但我不希望这样做，因为这些Python脚本已被一些应用程序使用，并且我试图将其保留下来。简化而不是在各处复制代码。

Answer 1

尝试使用Promise

   function runGetList() {
     var p = new Promise(function(resolve, reject) {
       // request external Python script (output in JSON)
       var handleResponse = function(status, response) {
         // save JSON-from-Python as an object
         var jsonMDBList = xhr.response;
         // do stuff with the object data (build select box, build table)
         resolve(jsonMDBList)
       }
       var handleStateChange = function() {
         switch (xhr.readyState) {
           case 0:
             break; // uninitialized
           case 1:
             break; // loading
           case 2:
             break; // loaded
           case 3:
             break; // interactive
           case 4: // completed
             handleResponse(xhr.status, xhr.response);
             break;
           default:
             alert("unspecified error");
         }
       }
       var xhr = new XMLHttpRequest();
       xhr.onreadystatechange = handleStateChange;
       xhr.open("GET", "python/GetListMDBs.py", true);
       xhr.responseType = "json";
       xhr.send();
     });
     return p
   }

   function getAllLists() {
     var mdbListAll = runGetList('GetListMDBs.py');
     var mdbListTbl;
     console.log("list mdbs: " + mdbListAll);
     mdbListAll.then(function(data) {
       console.log("table mdbs: " + data);
       mdbListTbl = runGetList('GetTable.py');
       return mdbListTbl
     })
   }

Answer 2

基于guest271314的答案，但具有更好的异步请求链接：

function runGetList(filename) {
    var p = new Promise(function(resolve, reject) {
        // do stuff to get jsonMDBList
        resolve(jsonMDBList)
    }};
    return p;
}

function getAllLists() {
    var mdbListAll = runGetList('GetListMDBs.py'); // returns promise 1
    mdbListAll.then(function(data) {               // runs when promise 1 resolves
        console.log("list mdbs: " + data);
        mdbListTbl = runGetList('GetTable.py');    // returns promise 2
        return mdbListTbl
    }).then(function(data) {                       // runs when promise 2 resolves
        console.log("table mdbs: " + data);
    });
}