Ajax、Axios、Fetch核心区别

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

示例：

javascript 复制代码

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();

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

示例：

javascript 复制代码

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;
});

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

示例：

javascript 复制代码

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
本质	技术概念（基于 XHR）	第三方库	浏览器原生 API
Promise 支持	❌（需封装）	✅	✅
错误处理	手动检查状态码	自动 reject 非 2xx	需手动检查 response.ok
数据转换	手动处理	自动转换 JSON	需手动调用 .json()
取消请求	xhr.abort()	支持 CancelToken	需 AbortController
拦截器	❌	✅	❌
超时设置	xhr.timeout	timeout 配置项	❌（需封装）
跨域 Cookie	需配置 withCredentials	withCredentials 配置	credentials: "include"
浏览器兼容性	全面兼容（包括 IE）	现代浏览器 + IE11+	现代浏览器（不兼容 IE）

使用建议

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