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
本质	技术概念（基于 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（拦截器、自动转换、取消请求等开箱即用）。