Ajax、Axios、Fetch核心区别

1. Ajax（Asynchronous JavaScript and XML）
   • 本质：一种技术概念（非具体 API），用于异步数据交互。
   • 实现方式：通常通过 XMLHttpRequest (XHR) 对象实现。
   • 特点：
     • 兼容性：支持所有主流浏览器（包括旧版 IE）。
     • 回调地狱：需手动处理回调函数，代码可读性差（需嵌套或链式调用）。
     • 功能支持：原生不支持 Promise，需自行封装。

示例：

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data");
xhr.onload = function() {
  if (xhr.status === 200) console.log(xhr.responseText);
  else console.error("Request failed");
};
xhr.send();

2. Axios
   • 本质：基于 Promise 的 第三方 HTTP 库（可用于浏览器和 Node.js）。
   • 底层实现：浏览器端使用 XMLHttpRequest，Node.js 端使用 http 模块。
   • 核心优势：
     • Promise 支持：直接使用 .then() 和 .catch() 处理异步。
     • 拦截器：支持请求/响应拦截（如添加全局 token）。
     • 自动转换数据：自动将请求/响应数据转为 JSON。
     • 取消请求：通过 CancelToken 或 AbortController 实现。
     • 错误处理：HTTP 错误状态码（如 404、500）会触发 reject。
     • 超时设置：支持 timeout 配置。

示例：

axios.get("https://api.example.com/data")
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

// 拦截器示例
axios.interceptors.request.use(config => {
  config.headers.Authorization = "Bearer token";
  return config;
});

3. Fetch
   • 本质：浏览器原生提供的 API（基于 Promise）。
   • 特点：
     • 原生支持：现代浏览器内置，无需安装库。
     • Promise 驱动：直接返回 Promise 对象。
     • 手动处理：
       • 需手动转换响应数据（如 response.json()）。
       • HTTP 错误（如 404）不会触发 reject，需检查 response.ok。
     • 局限性：
       • 默认不带 Cookie，需设置 credentials: “include”。
       • 不支持请求超时/取消（需结合 AbortController 实现）。
       • 无请求拦截机制。

示例：

fetch("https://api.example.com/data")
  .then(response => {
    if (!response.ok) throw new Error("HTTP error");
    return response.json(); // 手动解析 JSON
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

// 取消请求（通过 AbortController）
const controller = new AbortController();
fetch(url, { signal: controller.signal })
  .then(...)
  .catch(...);
controller.abort(); // 取消请求

总结

使用建议

• 追求兼容性 → 选 Ajax (XHR) 或 Axios（对旧浏览器友好）。
• 轻量级/现代项目 → 选 Fetch（原生支持，减少依赖）。
• 功能丰富/易用性 → 选 Axios（拦截器、自动转换、取消请求等开箱即用）。