Axios与Fetch的详细对比解释

一、核心特性对比

​特性	​Fetch (原生API)	​Axios (第三方库)
​浏览器支持	现代浏览器原生支持，旧版需 Polyfill (如 whatwg-fetch)	需引入第三方库，但兼容 IE 及旧版浏览器
​请求语法	需手动设置 method 和 headers，数据通过 body 传递（需序列化）	直接通过 data 属性传递对象，自动序列化
​错误处理	仅网络错误触发 catch，需手动检查 response.ok 处理 HTTP 错误状态码	自动将非 2xx 状态码视为错误，触发 catch
​JSON 转换	需手动调用 .json() 解析响应数据	自动转换响应数据为 JSON
​拦截器	不支持原生拦截器，需重写全局 fetch 实现	内置请求/响应拦截器，统一处理 Token、错误等
​超时设置	需结合 AbortController 和 setTimeout 实现	直接通过 timeout 属性配置
​取消请求	使用 AbortController.signal	使用 CancelToken（旧版）或 AbortController（新版）
​上传/下载进度	不支持	支持监听进度事件
​CSRF 防护	需手动设置 credentials: 'include' 发送 Cookie	默认发送 Cookie，内置 XSRF 防护

---

二、优缺点分析

​Fetch 的优缺点

• ​优点：
  • 轻量级，无需额外依赖
  • 原生支持现代浏览器，适合简单请求场景
• ​缺点：
  • 错误处理复杂（需手动处理 HTTP 状态码）
  • 缺少拦截器、超时等高级功能，需自行封装

​Axios 的优缺点

• ​优点：
  • 功能全面（拦截器、自动 JSON 转换、取消请求等）
  • 统一的错误处理机制
  • 支持浏览器和 Node.js 环境
• ​缺点：
  • 增加项目体积（约 13KB）
  • 需额外引入库，不适合对体积敏感的项目

---

三、使用场景建议

1. ​选择 Fetch 的场景：

   • 项目仅需简单请求且无需兼容旧浏览器
   • 希望减少第三方依赖，保持代码轻量化
   • 示例代码：

     // GET 请求
     fetch('https://api.example.com/data')
       .then(response => {
         if (!response.ok) throw new Error('HTTP error');
         return response.json();
       })
       .then(data => console.log(data))
       .catch(error => console.error('Error:', error));

2. ​选择 Axios 的场景：

   • 复杂项目需要统一错误处理、拦截器或请求取消
   • 需兼容旧浏览器或服务端渲染（SSR）
   • 示例代码：

     // 拦截器配置
     axios.interceptors.request.use(config => {
       config.headers.Authorization = `Bearer ${token}`;
       return config;
     });
     
     // GET 请求
     axios.get('https://api.example.com/data', { timeout: 5000 })
       .then(response => console.log(response.data))
       .catch(error => console.error('Error:', error));

---

四、高级功能扩展

1. ​Axios 拦截器：

   • 请求拦截器：添加 Token、修改 headers
   • 响应拦截器：统一处理错误状态码

2. ​Fetch 的 Polyfill 方案：

   • 使用 whatwg-fetch 或 unfetch 兼容旧浏览器

3. ​取消请求实现对比：

   • ​Axios：

     const source = axios.CancelToken.source();
     axios.get('/data', { cancelToken: source.token });
     source.cancel('Request canceled by user');

   • ​Fetch：

     const controller = new AbortController();
     fetch('/data', { signal: controller.signal });
     controller.abort();

---

五、总结

• ​优先 Axios：需要丰富功能、跨环境兼容性或企业级项目
• ​优先 Fetch：轻量级应用、现代浏览器环境或对包体积敏感的场景
• ​核心差异：Axios 通过封装简化了 HTTP 请求的复杂性，而 Fetch 更接近原生 API，灵活性高但需手动处理细节