axios 与 fetch 的区别
1. 浏览器兼容性
fetch：是现代浏览器原生支持的 API，但是旧版本浏览器（如 IE）不支持，需要使用 polyfill 来兼容。axios：可以在所有现代浏览器以及旧版本浏览器中使用，因为它是基于 XMLHttpRequest 封装的，所以兼容性更好。
2. 请求拦截和响应拦截
fetch：本身没有内置的拦截器机制，如果需要实现请求拦截和响应拦截，需要手动封装。axios：提供了强大的拦截器功能，可以在请求发送前和响应返回后进行统一处理，比如添加请求头、错误处理等。
3. 错误处理
fetch：只有在网络请求失败（如网络中断）时才会 reject，而对于 HTTP 错误状态码（如 404、500），仍然会 resolve，需要手动检查响应状态码。axios：当 HTTP 状态码不是 2xx 时，会 reject，方便进行错误处理
4. 取消请求
fetch：在旧版本中没有内置的取消请求机制，需要使用AbortController来实现。axios：提供了CancelToken来取消请求，使用起来更方便。
1. 底层设计与兼容性
Axios：基于 XMLHttpRequest 封装，兼容 IE11+（需 polyfill），适合企业级项目
Fetch：原生 API（ES6+），现代浏览器（Chrome 42+、Firefox 39+）直接支持，适合轻量级应用。
2. 请求 / 响应处理
- Axios：
- 自动转换 JSON：响应数据直接解析为对象。
- 拦截器：全局处理请求头、响应错误（如自动刷新 token）。
- Fetch：
- 手动解析响应：需显式调用
res.json()、res.text()等。 - 无内置拦截器：需手动封装（如封装
fetchWrapper）。
3. 错误处理机制
- Axios：
- 网络错误、4xx/5xx 状态码均会触发
catch。 - 响应对象包含完整信息（如
err.response.status）。
- 网络错误、4xx/5xx 状态码均会触发
- Fetch：
- 仅网络错误触发
catch，4xx/5xx 需手动检查res.ok。 
- 仅网络错误触发
4. 取消请
5. 进度监控
6. 项目选型建议
| 场景 | 推荐方案 | 理由 |
|---|---|---|
| 企业级应用（需 IE 兼容） | Axios | 完整的错误处理、拦截器机制，减少重复代码 |
| 微前端 / 小型项目 | Fetch + 自定义封装 | 减少 bundle 体积（Axios ~18KB，Fetch 0KB） |
| 文件上传 / 下载 | Axios | 内置进度监控，简化开发 |
| 框架集成（React/Vue） | Axios + 状态管理 | 结合 Redux Middleware 或 Vuex 统一处理 API 请求 |
7. 实战封装示例（Fetch）
总结
- Axios：功能全面，适合追求开发效率和兼容性的项目。
- Fetch：轻量原生，适合对体积敏感或不需要复杂功能的场景。
项目中使用Axios或Fetch时如何处理错误？
如何在项目中选择使用Axios还是Fetch？
在项目中使用Fetch发送POST请求时如何设置请求体？