前端每日一练：使用 Promise 封装 AJAX 请求

在前端开发中，经常需要使用 AJAX 进行异步数据请求。为了提高代码的可维护性和可读性，我们可以使用 Promise 对 XMLHttpRequest 进行封装。本文将介绍如何使用 Promise 封装 AJAX 请求，并提供一个示例。

1. AJAX 封装函数

首先，让我们看一下如何使用 Promise 对 XMLHttpRequest 进行封装。

 

function ajax(url, method, data) {​
  return new Promise(function (resolve, reject) {​
    const xhr = new XMLHttpRequest();​
​
    xhr.open(method, url, true);​
​
    xhr.onload = function () {​
      if (xhr.status >= 200 && xhr.status < 300) {​
        resolve(xhr.responseText);​
      } else {​
        reject(xhr.statusText);​
      }​
    };​
​
    xhr.onerror = function () {​
      reject(xhr.statusText);​
    };​
​
    if (data) {​
      xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");​
      xhr.send(JSON.stringify(data));​
    } else {​
      xhr.send();​
    }​
  });​
}​
​
// 使用示例​
ajax("https://jsonplaceholder.typicode.com/posts/1", "GET")​
  .then(function (response) {​
    console.log("Success:", response);​
  })​
  .catch(function (error) {​
    console.error("Error:", error);​
  });

2. 使用示例

接下来，让我们看一下如何使用封装好的 AJAX 函数进行异步请求。

ajax("https://jsonplaceholder.typicode.com/posts/1", "GET")
  .then(function (response) {
    console.log("Success:", response);
  })
  .catch(function (error) {
    console.error("Error:", error);
  });

在这个示例中，我们使用了 Promise 的 then 和 catch 方法来处理 AJAX 请求的成功和失败情况。如果请求成功，会打印出返回的响应数据；如果请求失败，会打印出错误信息。

3. 注意事项

• 使用 Promise 封装 AJAX 请求可以更好地处理异步操作，使代码更加清晰易读。
• 在封装函数中，我们使用了 XMLHttpRequest 来发送 HTTP 请求，并根据响应状态码来决定 Promise 的状态。
• 在使用封装函数时，可以通过 then 和 catch 方法来处理请求的成功和失败情况，以及返回的响应数据。

通过本文的介绍，你现在应该了解如何使用 Promise 封装 AJAX 请求，并在实际项目中应用它。这种方式可以提高代码的可维护性和可读性，使异步操作更加易于管理。