基于Promise手动封装ajax

// 创建一个Ajax函数，用于发送HTTP请求
function ajax(url, method = 'GET', data = null) {
  // 返回一个Promise
  return new Promise((resolve, reject) => {
    // 创建一个新的XHR对象
    const xhr = new XMLHttpRequest();
 
    // 配置XHR对象
    xhr.open(method, url);
 
    // 如果发送的是POST请求，设置请求头
    if (method === 'POST') {
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    }
 
    // 发送请求
    xhr.send(data);
 
    // 监听请求完成
    xhr.onload = function() {
      if (this.status >= 200 && this.status < 300) {
        // 请求成功
        try {
          // 解析返回的数据，可能是JSON格式
          const response = JSON.parse(xhr.responseText);
          resolve(response);
        } catch (e) {
          // 如果不是JSON格式，直接返回文本
          resolve(xhr.responseText);
        }
      } else {
        // 请求失败
        reject(new Error(xhr.statusText));
      }
    };
 
    // 监听请求错误
    xhr.onerror = function() {
      reject(new Error("Network Error"));
    };
  });
}
 
// 使用示例
ajax('https://api.example.com/data', 'GET').then(response => {
  console.log(response); // 处理响应数据
}).catch(error => {
  console.error(error); // 处理错误
});

这段代码定义了一个ajax函数，它接受一个URL、HTTP方法和数据作为参数，并返回一个Promise。通过监听XHR对象的onload和onerror事件，我们可以在请求成功或失败时分别调用resolve或reject。这是一个简单的Ajax请求封装，适用于学习和小型项目。