📜  在继续之前等待 ajax 响应 javascript (1)

📅  最后修改于: 2023-12-03 15:37:46.590000             🧑  作者: Mango

在继续之前等待 AJAX 响应 JavaScript

当我们在使用 AJAX 技术时,我们需要在 JavaScript 代码中等待服务器的响应,然后再继续执行后续的代码。因为网络请求是异步的,所以我们不能像同步代码那样先发出请求,然后同步等待响应结果。

下面是几种等待 AJAX 响应的方法。

回调函数(Callback Function)

回调函数是最基本,也是最常用的方法。我们在 AJAX 请求的参数中传入一个回调函数,在服务器响应后,回调函数被调用。

function ajax(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      callback(xhr.responseText);
    }
  };
  xhr.open("GET", url, true);
  xhr.send();
}
// 使用
ajax("http://example.com", function(responseText) {
  console.log(responseText);
});
Promise

Promise 是一种异步编程的新方法,它能够有效地解决回调函数嵌套的问题。当 Promise 实例的状态改变时,它会执行绑定在它上面的回调函数。

在 AJAX 中,我们可以使用 Promise 对象封装 AJAX 请求,然后进行相关的处理。

function ajax(url) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        resolve(xhr.responseText);
      }
    };
    xhr.open("GET", url, true);
    xhr.send();
  });
}
// 使用
ajax("http://example.com")
  .then(function(responseText) {
    console.log(responseText);
  })
  .catch(function(error) {
    console.log(error);
  });
Async/Await

Async/Await 是 ES2017 中新增的语法特性,它能够让异步代码看起来像同步代码一样。使用 Async/Await,我们可以通过 await 关键字等待异步操作的完成,然后继续执行后续的代码。async 关键字用于声明一个异步函数。

在 AJAX 中,我们可以使用 Async/Await 封装 AJAX 请求,然后进行相关的处理。

async function ajax(url) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        resolve(xhr.responseText);
      }
    };
    xhr.open("GET", url, true);
    xhr.send();
  });
}
// 使用
(async function() {
  var responseText = await ajax("http://example.com");
  console.log(responseText);
})();

以上就是在 JavaScript 中等待 AJAX 响应的几种方法。无论采用何种方式,我们都需要了解 AJAX 的原理和异步编程的思想,才能“合理”地等待 AJAX 响应。