在JavaScript中进行HTTP请求时，最常用的两个工具是：
- 原生fetch API
- 流行的第三方库Axios
我都在生产环境中使用过这两个工具。虽然两者都表现良好，但有时我会后悔选择了其中一个而非另一个。
以下是我的选择方法以及我通过惨痛教训学到的注意事项。
快速对比表格
功能 | 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 |
总结
fetch和Axios都是优秀的工具——但它们在不同场景下各有所长。
如果我在构建快速项目或编写脚本，我会坚持使用 _fetch_。
如果我需要更好的开发体验、全局错误处理或拦截器，我会选择 _Axios_。
最棒的是什么？你甚至可以将fetch封装在你自己的抽象中，让它感觉像Axios——同时保持打包体积精简。
你在应用中使用的是什么——Axios还是fetch？
有没有什么遗憾或意外的收获？来评论区交流一下