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

相关推荐
dy171735 分钟前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
一朵梨花压海棠go6 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
一只小风华~7 小时前
Vue: Class 与 Style 绑定
前端·javascript·vue.js·typescript·前端框架
十碗饭吃不饱7 小时前
net::ERR_EMPTY_RESPONSE
java·javascript·chrome·html5
Zz_waiting.8 小时前
Javaweb - 14.6 - Vue3 数据交互 Axios
开发语言·前端·javascript·vue·axios
每天吃饭的羊9 小时前
state和ref
前端·javascript·react.js
GEO_YScsn9 小时前
Vite:Next-Gen Frontend Tooling 的高效之道——从原理到实践的性能革命
前端·javascript·css·tensorflow
GISer_Jing9 小时前
滴滴二面(准备二)
前端·javascript·vue·reactjs
摇滚侠9 小时前
Vue3入门到实战,最新版vue3+TypeScript前端开发教程,笔记03
javascript·笔记·typescript
GISer_Jing9 小时前
滴滴二面准备(一)
前端·javascript·面试·ecmascript