Question

我有2个函数应该在页面加载时调用。

window.addEventListener("load", function(e) {
    func_a(); //send request to server (Node js)
    func_b(); //send request to server (Node js)
});

func_a会向服务器发送一个只更新列表但不会.end返回的请求。

func_b() should send a request to the server and notify to all responses in the list.

但是，出于某种原因，func_b()的请求在另一个请求之前发送..并且实际上没有通知任何内容。

为什么会这样？

编辑：

function func_a() {

  var xhttp = new XMLHttpRequest();

    xhttp.addEventListener('load', function (e) { 
    if(xhttp.status != 200){
        //handle error
        return;
    }
    handle_func(this.responseText);
    func_a();
    });

  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();

}

Answer 1

Ajax异步工作，因此无法保证在第二个请求之前完成第一个请求。因此，您必须在第一个请求完成后通过将其作为第一个请求的回调函数来进行第二个请求

function func_a(callback) {

  var xhttp = new XMLHttpRequest();

  xhttp.onreadystatechange = function() {

    if (this.readyState == 4 && this.status == 200) {
      callback();
    }

  };

  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();

}  

function func_b() {

  var xhttp = new XMLHttpRequest();

  xhttp.onreadystatechange = function() {

    if (this.readyState == 4 && this.status == 200) {
      // Do something here
    }

  };

  xhttp.open("GET", "ajax_info2.txt", true);
  xhttp.send();

}

func_a(func_b);

Answer 2

如果您需要以下内容，使用Promise是公平的：

func_a().then(() => {
  console.log('Hi I am callback of func_a');
  func_b().then(() => {
    console.log('Hi i am callback of func_b')
  })
})

如果是这样的＆amp;你喜欢这种范式，那么你的职能应该得到纠正以回报承诺：

function func_a() {
  return new Promise((resolve, reject) => {
    var xhttp = new XMLHttpRequest();

    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        resolve();
      } else {
        reject()
      }
    };

    xhttp.open('GET', 'ajax_info.txt', true);
    xhttp.send();
  });
}

function func_b() {
  return new Promise((resolve, reject) => {
    var xhttp = new XMLHttpRequest();

    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        resolve();
      } else {
        reject()
      }
    };

    xhttp.open('GET', 'ajax_info2.txt', true);
    xhttp.send();
  });
}

注意：如果您熟悉ES7，准备函数以返回promise是async-await的基础：

async function myCalls() {
   await func_a();
   func_b(); 
}

myCalls();

在发送另一个请求之前等待[Javascript]

2 个答案: