带有 Ajax 的 JS Promis

在编写现代 Web 应用程序时，经常需要与远程服务器进行通信。这涉及到进行 Ajax 请求，这通常需要编写大量的回调函数来处理成功和失败的情况。JS Promis 是一个解决这个问题的方案，它们是一种设计模式，可以帮助处理异步操作。

什么是 Promis

在 JavaScript 中，Promis 代表着一种异步操作的最终完成状态。一个 Promis 可以有三种状态：

1. pending：初始状态，既不是成功，也不是失败。
2. fulfilled：意味着操作成功完成，返回一个值。
3. rejected：意味着操作失败，返回一个错误。

当 Promis 状态从 pending 变为 fulfilled 或 rejected 时，会触发一个回调函数。

如何使用带有 Ajax 的 JS Promis

可以使用 jQuery 库提供的 $.ajax 方法来创建带有 Ajax 的 JS Promis。该方法返回一个 Promis 对象，可以使用 .then() 方法来添加完成和拒绝处理程序。

$.ajax({
  url: "your_api_endpoint",
  method: "GET"
})
.then(
  function(response) {
    console.log("Ajax 成功调用");
    console.log(response);
  },
  function(error) {
    console.error("Ajax 调用失败");
    console.error(error);
  }
);

在这个例子中，我们使用 jQuery 的 $.ajax 方法来进行 Ajax 请求。当请求回来时，它将调用第一个回调函数，如果出现错误，则将调用第二个回调函数。

使用原始的 XHR 对象

如果您不想使用 jQuery，可以创建一个 Promis 对象来处理自己的 Ajax 请求。

function ajaxPromise(url, method) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.onload = function() {
      if (xhr.status === 200) {
        resolve(xhr.response);
      } else {
        reject(xhr.statusText);
      }
    };
    xhr.onerror = function() {
      reject("网络错误");
    };
    xhr.send();
  });
}

ajaxPromise("your_api_endpoint", "GET")
  .then(function(response) {
    console.log("Ajax 成功调用");
    console.log(response);
  })
  .catch(function(error) {
    console.error("Ajax 调用失败");
    console.error(error);
  });

在这个例子中，我们创建了一个 ajaxPromise 函数，该函数返回一个 Promis，用于处理 Ajax 请求。当请求回来时，它将调用 .then() 回调函数，如果出现错误，则将调用 .catch() 回调函数。我们使用 XHR 对象来发出 Ajax 请求，并根据响应代码调用 resolve() 或 reject() 函数。