如何将原生ajax封装成Promise

如何将原生ajax封装成Promise

首先，我们需要创建一个函数，让它封装ajax请求并返回一个Promise对象。我们可以将这个函数命名为ajaxPromise：

function ajaxPromise(url, method, data) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.onload = function() {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(xhr.response);
      } else {
        reject(new Error(xhr.statusText));
      }
    };
    xhr.onerror = function() {
      reject(new Error("Network Error"));
    };
    xhr.send(data);
  });
}

接下来，让我们来解释一下这个函数的工作原理。ajaxPromise函数接受三个参数：url表示请求的地址，method表示请求的方式（比如GET、POST等），data表示请求的数据。

在函数内部，我们创建一个XMLHttpRequest对象，并调用open方法设置请求的方法和地址。然后，我们定义了onload和onerror的回调函数来处理请求成功和失败的情况。

在onload回调函数中，我们首先检查了请求的状态码，通过status属性来判断是否请求成功。如果状态码在200和300之间，我们调用Promise的resolve方法，返回响应的数据；如果不在这个范围内，我们调用reject方法，返回错误的状态信息。

在onerror回调函数中，我们直接调用reject方法，返回一个错误对象。

现在，你可以使用这个封装好的ajaxPromise来发起异步请求了。只需调用这个函数，并通过.then方法来处理请求成功或失败的情况：

ajaxPromise("https://api.example.com/data", "GET")
  .then(function(response) {
    console.log("请求成功！返回的数据是：" + response);
  })
  .catch(function(error) {
    console.log("请求失败！错误信息是：" + error);
  });

通过封装ajax为Promise，我们可以使用更简洁的语法来处理异步请求，让代码更加清晰和易读。