基于原生JS实现Ajax的封装（包含 Fetch）

在原生 JavaScript 中，我们可以封装一个自定义的 Ajax 函数来简化并统一处理各种类型的 HTTP 请求。以下是一个基于 XMLHttpRequest 或者 Fetch API 的 AJAX 封装示例：

1. 基于 XMLHttpRequest：创建一个新的 XMLHttpRequest 对象，设置请求方法、URL、请求头等信息，然后监听 onload 和 onerror 事件分别处理成功和失败的情况。成功时解析响应文本为 JSON 并返回，失败时抛出错误信息。

// 使用 XMLHttpRequest 实现的 AJAX 封装
function ajax(method, url, data = null, headers = {}) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();

    xhr.open(method, url, true);
    Object.keys(headers).forEach(key => xhr.setRequestHeader(key, headers[key]));

    xhr.onload = function() {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(JSON.parse(xhr.responseText));
      } else {
        reject(xhr.statusText);
      }
    };

    xhr.onerror = function() {
      reject(xhr.statusText);
    };

    xhr.send(data ? JSON.stringify(data) : null);
  });
}

// 使用示例：
// XMLHttpRequest 版本
ajax('GET', 'https://api.example.com/data')
  .then(data => console.log(data))
  .catch(error => console.error(error));

2.基于 Fetch API：使用 fetch 函数发起请求，传入 URL、请求方法和可选的请求头、数据等参数。通过检查 response.ok 来判断请求是否成功，成功则解析响应体为 JSON，否则抛出错误。整个过程使用 async/await 语法进行异步处理。

// 使用 Fetch API 实现的 AJAX 封装
async function fetchAjax(method, url, data = null, headers = {}) {
  const options = {
    method,
    headers: Object.entries(headers).reduce(
      (acc, [key, value]) => ({ ...acc, [key]: value }),
      { 'Content-Type': 'application/json' }
    ),
  };

  if (data !== null) {
    options.body = JSON.stringify(data);
  }

  try {
    const response = await fetch(url, options);
    if (!response.ok) throw new Error(response.statusText);

    const json = await response.json();
    return json;
  } catch (error) {
    throw new Error(error.message);
  }
}

// Fetch API 版本
fetchAjax('GET', 'https://api.example.com/data')
  .then(data => console.log(data))
  .catch(error => console.error(error));

 您可以根据项目需求和浏览器兼容性选择使用其中任一版本的 ajax 函数。记得在实际使用时替换示例中的 URL 为您的 API 地址，并根据需要调整请求方法、数据和头部信息。