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 防护 需手动处理

js 复制代码
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

拦截器与全局配置

  • 支持 请求/响应拦截器,方便统一处理日志、认证、错误等。
  • 支持全局默认配置(如 baseURLheaders)。

错误处理 任何 HTTP 错误状态码(如 404、500)均会触发 catch

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

上传/下载进度监控 支持 onUploadProgressonDownloadProgress 回调。

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

js 复制代码
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 和自动错误处理。
相关推荐
Struggler2815 分钟前
google插件开发:如何开启特定标签页的sidePanel
前端
爱编程的喵17 分钟前
深入理解JSX:从语法糖到React的魔法转换
前端·react.js
代码的余温26 分钟前
CSS3文本阴影特效全攻略
前端·css·css3
AlenLi35 分钟前
JavaScript - 策略模式在开发中的应用
前端
xptwop37 分钟前
05-ES6
前端·javascript·es6
每天开心38 分钟前
告别样式冲突:CSS 模块化实战
前端·css·代码规范
wxjlkh41 分钟前
powershell 批量测试ip 端口 脚本
java·服务器·前端
海底火旺41 分钟前
单页应用路由:从 Hash 到懒加载
前端·react.js·性能优化
每天开心42 分钟前
噜噜旅游App(3)——打造个性化用户中心:AI生成头像与交互设计
前端·前端框架
Heo43 分钟前
调用通义千问大模型实现流式对话
前端·javascript·后端