Question

考虑这段代码，就像一个玩具示例：

function loadDoc() {

    var xhttp = new XMLHttpRequest();

    xhttp.onreadystatechange = function() {

        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("demo").innerHTML = this.responseText;
        }
    };
    xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
    xhttp.send();
}

让我们考虑函数loadDoc()中有五种异步调用。我现在要做的是在执行所有五个回调函数时调用另一个函数或任何代码。 Javascript是否提供任何帮助解决这种情况，或者我们需要设置一个标志来检查是否所有5个任务都被执行了？

Answer 1

如果您使用promises，则可以使用Promise.all([promises])。

＆＃34; Promisifying＆＃34;你当前的ajax请求：

function loadDoc() {
    req().then(function (responseText) {
        document.getElementById("demo").innerHTML = responseText;
    })

}

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

        xhttp.onreadystatechange = function() {

            if (this.readyState == 4 && this.status == 200) {
                resolve(this.responseText);
            } else {
                reject();
            }
        };
        xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
        xhttp.send();
    });
}

Answer 2

您可以使用回调或承诺，

回调示例：

function loadDoc(cb) {

  var xhttp = new XMLHttpRequest();

  xhttp.onreadystatechange = function() {

    if (this.readyState == 4 && this.status == 200) {
        document.getElementById("demo").innerHTML = this.responseText;
        cb(xhttp.responseText); // <= run the callback
    }
  };
  xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
  xhttp.send();

}

loadDoc(function(res) {
  console.log(res);
  // do something 
});

承诺示例：

function loadDoc(cb) {
  return return new Promise(function (resolve, reject) {
    var xhttp = new XMLHttpRequest();

    xhttp.onreadystatechange = function() {

      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("demo").innerHTML = this.responseText;
        resolve(xhttp.responseText); // <= run the callback
      } else {
        reject(xhttp.responseText);
      }
    };
    xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
    xhttp.send();

}

loadDoc()
.then(function(res) {
  console.log(res);
  // do something 
})
.catch(function(err) {
  console.error(err);
  // do something 
});

如何在执行回调函数后调用一段代码？

2 个答案: