axios 和fetch的取舍,以及比较

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

区别

相同点

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

不同点

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

  • 语法:

    javascript 复制代码
    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格式,如下:

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

      javascript 复制代码
      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的使用,以达到最好的兼容性。

相关推荐
前端君7 分钟前
实现最大异步并发执行队列
javascript
知识分享小能手1 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队2 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
萌萌哒草头将军3 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
Qlittleboy3 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
林_深时见鹿3 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
GDAL3 小时前
Knockout.js 任务调度模块详解
javascript·knockout
椒盐螺丝钉3 小时前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~3 小时前
v-model与-sync的演变和融合
前端·javascript·vue.js
GW_Cheng3 小时前
分享一个vue2的tinymce配置
开发语言·javascript·ecmascript