axios和fetch的对比

axiosfetch 是用于发起 HTTP 请求的两种常见工具,它们的主要区别如下:

1. 浏览器兼容性

  • axios :基于 XMLHttpRequest,兼容性较好,支持较旧的浏览器(如 IE11)。
  • fetch:现代浏览器原生支持,但不兼容 IE 等旧浏览器,可能需要 polyfill。

2. API 设计

  • axios:API 设计简洁,支持链式调用,使用 Promise,提供便捷的请求和响应拦截器。
  • fetch:API 较底层,返回 Promise,但需要手动处理 JSON 转换和状态码检查。

3. 请求和响应处理

  • axios :自动转换 JSON 数据,响应数据在 data 属性中,提供请求和响应拦截器。
  • fetch :需手动调用 .json() 方法解析 JSON,且不会自动处理错误状态码(如 404、500)。

4. 错误处理

  • axios :HTTP 错误状态码(如 404、500)会触发 catch,便于统一处理。
  • fetch :仅在网络故障时触发 catch,HTTP 错误状态码需手动处理。

5. 取消请求

  • axios :支持通过 CancelTokenAbortController 取消请求。
  • fetch :仅支持 AbortController 取消请求。

6. 进度监控

  • axios:支持上传和下载进度监控。
  • fetch:不直接支持进度监控,需通过其他方式实现。

7. 体积

  • axios:体积较大(约 13KB)。
  • fetch:原生支持,无需额外引入。

示例代码

axios
js 复制代码
axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));
fetch
js 复制代码
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) throw new Error('Network response was not ok');
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

总结

  • axios:功能丰富,使用方便,适合复杂场景。
  • fetch:轻量、现代,适合简单场景或对包大小敏感的项目。

根据项目需求选择合适的工具。

相关推荐
excel4 分钟前
Web发展与Vue.js导读
前端
YAY_tyy6 分钟前
Three.js 开发实战教程(五):外部 3D 模型加载与优化实战
前端·javascript·3d·three.js
Zuckjet_3 小时前
开启 3D 之旅 - 你的第一个 WebGL 三角形
前端·javascript·3d·webgl
2401_863801463 小时前
探索 12 种 3D 文件格式:综合指南
前端·3d
珍宝商店5 小时前
前端老旧项目全面性能优化指南与面试攻略
前端·面试·性能优化
bitbitDown5 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
YAY_tyy5 小时前
【JavaScript 性能优化实战】第六篇:性能监控与自动化优化
javascript·性能优化·自动化
gnip6 小时前
实现AI对话光标跟随效果
前端·javascript
脑花儿6 小时前
ABAP SMW0下载Excel模板并填充&&剪切板方式粘贴
java·前端·数据库
闭着眼睛学算法7 小时前
【华为OD机考正在更新】2025年双机位A卷真题【完全原创题解 | 详细考点分类 | 不断更新题目 | 六种主流语言Py+Java+Cpp+C+Js+Go】
java·c语言·javascript·c++·python·算法·华为od