fetch和axios的区别

1、fetch

来源与兼容性 浏览器原生提供的api，现代浏览器支持，但是IE浏览器不支持

请求与响应处理

• 
  
• 请求体格式： 需手动设置 Content-Type，如发送 JSON 时需 JSON.stringify(data) 并添加 headers: { 'Content-Type': 'application/json' }。
  
• 需要手动处理JSON解析(response.json())
  
• 错误状态码（默认不抛出HTTP错误，如 404、500，需要检查response.ok）
  
• cookie： 默认不带cookie，需手动配置 credentials:'include'
  

拦截器与全局配置

• 
  
• 无内置拦截器，需手动封装或使用第三方库实现类似功能。
  
• 全局配置需自行封装（如统一添加请求头）。
  

错误处理 仅在网络请求失败时（如断网）触发 reject，HTTP 错误状态码（如 404）不会触发 catch。

取消请求 使用 AbortController 实现取消。

上传/下载进度监控 不支持原生进度监控，需通过读取响应流实现（较复杂）。

CSRF/XSRF 防护 需手动处理

const controller = new AbortController();

fetch(url, {signal: controller.signal}).then(res => { 
if (!res.ok) throw new Error("HTTP error"); 
return res.json(); 

}).catch(err => {
if (err.name === 'AbortError') console.log('Request canceled');

});


controller.abort(); // 取消请求

使用场景：

• 
  
• 对依赖体积敏感，不想引入额外依赖。
  
• 请求逻辑简单，无需复杂配置或拦截器。
  

2、axios

来源与兼容性 第三方组件库（基于XMLHttpRequest）

请求与响应处理

• 
  
• 请求体格式： 自动根据数据类型设置 Content-Type（如对象默认转为 JSON）。
  
• 自动处理JSON解析(response.data)
  
• 自动将非 2xx 状态码视为错误（触发 catch）
  
• cookie： 默认带cookie： 自动发送同源请求的cookie
  

拦截器与全局配置

• 
  
• 支持 请求/响应拦截器，方便统一处理日志、认证、错误等。
  
• 支持全局默认配置（如 baseURL、headers）。
  

错误处理 任何 HTTP 错误状态码（如 404、500）均会触发 catch。

取消请求 使用 AbortController 实现取消。

上传/下载进度监控 支持 onUploadProgress 和 onDownloadProgress 回调。

CSRF/XSRF 防护 内置支持 XSRF Token 配置。

const controller = new AbortController();


axios.get(url, {signal: controller.signal}).then(res => {
console.log(res.data)

}).catch(err => {
if (axios.isCancel(err)) console.log('Request canceled');

});


controller.abort();

使用场景：

• 
  
• 需要拦截器、取消请求、超时等高级功能。
  
• 项目跨浏览器和 Node.js 环境。
  
• 希望简洁的 API 和自动错误处理。