快速对比表格

功能	fetch（原生）	Axios（库）
内置？	✅ 是	❌ 否（需要安装）
JSON 解析	❌ 手动 (res.json())	✅ 自动
请求/响应拦截器	❌ 不支持	✅ 支持
超时支持	❌ 需手动实现	✅ 内置支持
错误处理	❌ 仅限网络错误	✅ 将非 2xx 响应视为错误
上传进度	❌ 实现复杂	✅ 内置支持
打包体积	✅ 0 KB	❌ 约 14 KB（压缩后）

我喜爱fetch的地方

✅ 内置且零依赖
无需安装或导入任何内容——适用于所有现代浏览器和Node（通过node-fetch）。

✅ 使用async/await可读性强

const res = await fetch('/api/data');
const data = await res.json();

✅ 当你想要更多控制时表现出色
当我想手动处理边缘情况时，尤其是在小型应用或脚本中，我喜爱使用fetch。

我对fetch的遗憾

❌ 没有自动JSON解析
你总是得写await res.json()。不是大问题，但很重复。

❌ 没有内置超时功能
你必须使用AbortController，这对初学者来说稍显不便。

const controller = new AbortController();
const timeout = setTimeout(() => controller.abort(), 5000);
const res = await fetch('/api/data', { signal: controller.signal });

❌ HTTP错误不会抛出异常
Fetch仅在出现网络问题时抛出异常——对于404或500不会。你必须手动检查：

if (!res.ok) throw new Error('Something went wrong');

⚙️ 我喜爱Axios的地方

✅ 开箱即用——样板代码更少
你内置了JSON解析、请求头设置和错误处理。

✅ 更清晰的错误处理流程
对于404、500等它会抛出异常。这让try/catch更有意义。

✅ 请求和响应拦截器
你可以附加令牌、记录请求或全局处理错误：

axios.interceptors.request.use(config => {
  config.headers.Authorization = `Bearer ${token}`;
  return config;
});

✅ 更适合文件上传和大型应用
Axios简化了进度追踪、表单数据等操作。

我对Axios的遗憾

❌ 额外的依赖
对于小型工具或脚本，我更倾向于避免添加外部库。

❌ 前端应用的打包体积
虽然不算巨大，但在优化时，即使是约14 KB也可能有影响。

❌ 底层“魔法”
Axios做了许多抽象——有时这使得调试比使用fetch更不透明。

我的经验

使用场景	我更倾向于
快速脚本 / 小型应用	fetch
生产级前端应用	Axios
需要全局错误处理	Axios
更倾向于无依赖	fetch
文件上传 / 进度条	Axios