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 和自动错误处理。
相关推荐
前端开发与ui设计的老司机几秒前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人3 分钟前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
翻滚吧键盘44 分钟前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
秃了也弱了。1 小时前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)1 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~2 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中2 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
然我2 小时前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
NanLing2 小时前
【纯前端推理】纯端侧 AI 对象检测:用浏览器就能跑的深度学习模型
前端
呆呆的心2 小时前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css