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）。
• 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请求时如何设置请求体？