基于 Promise 的 AJAX 封装实现：让异步请求更优雅Promise 是处理异步操作的工具，AJAX 是实现网页

在实现具体操作前，让我们先熟悉一下基本概念：

1. 什么是AJAX和Promise？

AJAX 是一个缩写，全称为 Asynchronous JavaScript and XML，意思是“异步的JavaScript和XML”。

那么异步是什么意思呢？

异步（Asynchronous） 是指一个操作或任务不需要等待另一个操作完成就可以开始执行。换句话说，异步操作允许程序在等待某个任务完成时，继续执行其他任务，而不是停下来等待。

因此从字面意思我们不难猜到，AJAX可以让网页在不重新加载整个页面的情况下，与服务器进行数据交互。简单来说，就是可以让网页的一部分内容动态更新，而不需要刷新整个页面。

翻译成人话就是：当你在浏览新闻网站时，点击“下一页”，页面的内容会更新，但页面不会重新加载。这就是AJAX在起作用。

而Promise是JavaScript中的一种对象，用来处理异步操作（比如等待服务器返回数据）。它可以帮助我们更好地管理异步代码，避免代码变得混乱。

2.通过JavaScript与服务器通信的方法

尽管JavaScript本身没有直接的网络通信能力，但它可以通过浏览器提供的内置对象（如XMLHttpRequest或fetch API）与服务器进行通信。

XMLHttpRequest是AJAX的核心实现方式，它允许JavaScript与服务器进行异步通信。

以下是它的基本用法

1.创建 XMLHttpRequest 实例

var xhr = new XMLHttpRequest();

2.配置请求

在发送请求之前，需要配置请求的相关信息，包括请求方式（如GET或POST）、请求地址（URL）等。

xhr.open('GET', 'https://api.example.com/data', true);

请求方式：GET表示从服务器获取数据，POST表示向服务器发送数据。
请求地址：https://api.example.com/data是服务器的API地址。
异步标志：true表示请求是异步的，浏览器不会等待服务器响应，而是可以继续执行其他任务。

3.设置请求完成后的回调函数

当请求完成时，需要一个回调函数来处理服务器返回的数据。

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) { // 请求完成
        if (xhr.status === 200) { // 请求成功
            console.log(xhr.responseText); // 打印返回的数据
        } else {
            console.error('请求失败：' + xhr.status);
        }
    }
};

readyState：表示请求的状态。4表示请求完成。
status：表示请求的状态码。200表示请求成功。

4.发送请求

最后，调用send方法发送请求。

xhr.send();

三、AJAX-Promise的核心步骤与实现

创建 XMLHttpRequest 对象
- 使用 new XMLHttpRequest() 创建一个 XMLHttpRequest 实例，这是浏览器提供的用于发起 HTTP 请求的对象。
打开请求
- 使用 xhr.open("GET", url) 方法指定请求的类型（这里是 GET）和目标 URL。
- 这里假设请求方法是 GET，如果需要支持其他方法（如 POST），可以在后续扩展中添加支持。
发送请求
- 调用 xhr.send() 方法发送请求。
- 对于 GET 请求，send() 方法不需要传入任何参数。
监听请求状态
- 通过监听 xhr.onreadystatechange 事件来获取请求的状态变化。
- 当 xhr.readyState === 4 时，表示请求已经完成。
- 判断 xhr.status 是否为 200（表示请求成功）：
  - 如果成功，尝试解析响应数据为 JSON 格式。如果解析成功，调用 resolve 将解析后的数据返回；如果解析失败，直接返回原始的响应文本。
  - 如果失败，尝试解析响应数据为 JSON 格式。如果解析成功，调用 reject 将错误数据返回；如果解析失败，返回状态文本

完整代码

const myAjax = function (url) {
  return new Promise((resolve, reject) => {
    // 1. 创建 XMLHttpRequest 对象
    const xhr = new XMLHttpRequest();

    // 2. 打开请求
    xhr.open("GET", url);

    // 3. 发送请求
    xhr.send();

    // 4. 监听请求状态
    xhr.onreadystatechange = function () {
      // 判断请求是否完成
      if (xhr.readyState === 4) {
        // 判断请求是否成功
        if (xhr.status === 200) {
          // 请求成功，解析响应数据
          try {
            const response = JSON.parse(xhr.responseText);
            resolve(response); // 将解析后的数据传递给 resolve
          } catch (error) {
            resolve(xhr.responseText); // 如果解析失败，直接返回原始文本
          }
        } else {
          // 请求失败，返回错误信息
          try {
            const errorData = JSON.parse(xhr.responseText);
            reject(errorData); // 将错误数据传递给 reject
          } catch (error) {
            reject(xhr.statusText); // 如果解析失败，返回状态文本
          }
        }
      }
    };
  });
};

代码要点

通过 Promise 封装 XMLHttpRequest，使得异步请求的处理更加简洁和易于管理。
使用 onreadystatechange 事件监听请求状态变化，并在请求完成时根据状态码判断请求是否成功。
成功时通过 resolve 返回数据，失败时通过 reject 返回错误信息。
这种实现方式简单明了，适合快速实现基于 GET 请求的异步数据获取。