javascript - vanilla 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已经返回了一个 promise 。

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');
});