函数完成后使用普通JavaScript

Question

我试图从我现在运行的jQuery创建一个普通的JavaScript函数。 我想要做的是等待两个函数从两个不同的API请求加载数据。 如果两者都是空的，那么我想做点事。 我现在用JavaScript编写了两个请求函数，但是我陷入了.when部分。 我将如何在JavaScript中创建它。

现在的代码如下所示：

function Request1() {

    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://user', true);
    xhr.send();
    xhr.onreadystatechange = processRequest;

    function processRequest(e) {
         if (xhr.readyState == 4 && xhr.status == 200) {
            var data = JSON.parse(xhr.responseText);
            ResultData1 = data;
         }
     };

     return (ResultData1)
}


function Request2() {

    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://gameOrder', true);
    xhr.send();
    xhr.onreadystatechange = processRequest;

    function processRequest(e) {
         if (xhr.readyState == 4 && xhr.status == 200) {
            var data = JSON.parse(xhr.responseText);
            ResultData2 = data;
         }
     };

     return (ResultData2)
}

$.when(Request1(), Request2()).done(function (R1, R2) {

       if (ResultData1.length == 0 && ResultData2.length == 0) {

       // Do stuff here all works

       }
 });

我该怎么写

Answer 1

使用XMLHttpRequest可以将请求包装在Promise然后使用Promise.all等待所有请求完成。

 function request (url) { var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.send(); return new Promise(function (resolve, reject) { xhr.onreadystatechange = function (e) { if (xhr.readyState == 4 && xhr.status == 200) { var data = JSON.parse(xhr.responseText); resolve(data); } else if (xhr.readyState == 4) { reject(); } }; }); } Promise.all([ request('https://user'), request('https://gameOrder') ]).then(function (results) { var r1 = results[0]; var r2 = results[1]; console.log('Done'); if (r1.length == 0 && r2.length == 0) { // Do stuff console.log('Done'); } }).catch(function () { console.log('Error'); }); 

您还可以使用已经返回承诺的Fetch API 。

 function getJson (response) { return response.json(); } Promise.all([ fetch('https://user').then(getJson), fetch('https://gameOrder').then(getJson) ]).then(function (results) { var r1 = results[0]; var r2 = results[1]; console.log('Done'); if (r1.length == 0 && r2.length == 0) { // Do stuff console.log('Done'); } }).catch(function () { console.log('Error'); });