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

函数完成后使用普通JavaScript

1 个答案: