当前位置: 首页 > news >正文

axios 和fetch的取舍,以及比较

废话不多说,直接直捣黄龙:

区别

相同点

  • 都是一种基于promise的异步解决方案。都可以解决回调地狱问题

不同点

  • axios是一个封装好的库,需要npm进行安装,fetch是es6新增的api

  • 语法:

    fetch(url, { method: 'GET', // other options: POST, PUT, DELETE, etc. headers: { 'Content-Type': 'application/json'}, body: JSON.stringify({}), 
    }) 
    
    axios(url, { // configuration options 
    }) 
    
  • 处理json数据

    • fetch:需要两个then,要再第一个then里将响应体转成json格式,如下:

      const url = "****"; 
      fetch(url) .then(response => response.json()) .then(res=>console.log(res)); 
      
    • axios:只需要一个then

      const url = "****";axios.get(url)
      .then(response => console.log(response.data)); 
      
  • 当请求方法为post的时候,fetch需要把请求参数进行JSON.stringify()来转化参数

  • 错误处理:

    • fetch需要判断响应体里的status=200,或ok=true,其他状态需要手动处理
    • axios可以额外捕捉404或者其他http错误
  • 超时处理:

    • axios只需要再option选项里填写timeout属性,超出后自动在控制台抛出错误

    • fetch则需要AbortController接口来取消,如下

      const url = "*****"
      const controller = new AbortController();
      const signal = controller.signal;
      setTimeout(() => controller.abort(), 4000);fetch(url, {signal: signal}).then((response) => response.json()).then(console.log).catch((err) => {console.error(err.message);}); 
      
  • 效率:由于Fetch和axios都是基于promise的,因此它们不应该导致任何性能问题。这里比较的是他们的获取速度。经测试得知:fetch略快与axios

总结:

通过比较可以看出,对于较大型项目有大量http请求,需要良好的错误处理或http拦截的应用,Axios是一个更好的解决方案。在小型项目的情况下,只需要少量API调用,Fetch也是一个不错的解决方案。大多数浏览器和Node.js环境都支持Axios,而现在浏览器仅支持Fetch,所以使用H5或PC的项目使用Axios相对较好,使用App内嵌H5项目,依赖App壳子中的浏览器,尽量减少Fetch的使用,以达到最好的兼容性。

http://www.lryc.cn/news/145560.html

相关文章:

  • K-Means(K-均值)聚类算法理论和实战
  • Python-pyqt不同窗口数据传输【使用静态函数】
  • 百度垂类离线计算系统发展历程
  • ubuntu 安装 指定版本:nodejs
  • 16.CSS菜单悬停特效
  • 恒运资本:市盈率怎么算?
  • Docker运维中常见错误以及解决方法汇总1
  • Maven - 使用maven-release-plugin规范化版本发布
  • 2023.8.29 关于性能测试
  • 基于MATLAB的径向基函数插值(RBF插值)(一维、二维、三维)
  • flume拦截器
  • vue、elementui控制前一级选择后,后一级才会有数据
  • 亲测influxdb安装为window后台服务
  • 【LeetCode - 每日一题】823. 带因子的二叉树 (2023.08.29)
  • flutter 上传图片并裁剪
  • 一台服务器上部署 Redis 伪集群
  • ealtek高清晰音频管理器(realtek高清晰音频管理器怎么设置win10)
  • 微信小程序 scroll-view 组件的 bindscroll 不触发不生效
  • datax 删除分区数据,再写入MySQL脚本
  • hyperf 十四 国际化
  • C语言_初识C语言指针
  • EMQX启用双向SSL/TLS安全连接以及java连接
  • 4399面试总结C/C++游戏开发
  • hashlib 模块学习
  • 大模型开发05:PDF 翻译工具开发实战
  • LeetCode 43题:字符串相乘
  • 基于java Swing 和 mysql实现的飞机订票系统(源码+数据库+ppt+ER图+流程图+架构说明+论文+运行视频指导)
  • Jmeter性能综合实战 —— 签到及批量签到
  • 燃气管网监测系统,提升城市燃气安全防控能力
  • 【SQL】1731. 每位经理的下属员工数量 ( 新思想:确定左表,依次添加后续字段)