Ajax、Fetch、Axios三者的区别

作者：weixin_40725706 | 2024-04-15 14:08:46

踩

AJax

概念：Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。是一种网络请求的概念框架。
主要特点：实现页面局部刷新，主要使用js的XMLHttpRequest请求实现网络请求。
主要缺点：使用函数回调的方式实现异步请求，若请求里写请求将会导致回调地狱的发生。
示例代码：

<body>
  <script>
    function ajax(url) {
      const xhr = new XMLHttpRequest();
      xhr.open("get", url, false);
      //异步函数监听
      xhr.onreadystatechange = function () {
        // 异步回调函数
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            console.info("响应结果", xhr.response)
          }
        }
      }
      xhr.send(null);
    }
    ajax('https://smallpig.site/api/category/getCategory')
  </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Fetch

概念：使用ES6中提出的promise实现网络请求是Ajax的替代品，是真实存在的请求API。不是对Ajax的封装。
代码：

  <script>
    function ajaxFetch(url) {
      fetch(url).then(res => res.json()).then(data => {
        console.info(data)
      })
    }
    ajaxFetch('https://smallpig.site/api/category/getCategory')
  </script>
1
2
3
4
5
6
7
8

主要特点：

使用promise的方式进行网络请求，支持async / await；
采用模块化请求，语法简洁更加语义化，例如Request 、 Response,可读性较好；
脱离XHR，采用新的实现方式。

主要缺点：

只对网络请求错误进行reject，而对服务器返回的400或者500 都会被当做成功的请求；
不支持终端和超时处理，造成资源流量的浪费；
没办法监听请求的进度；
默认不会带cookie，需要手动添加配置；

Axios

概念：它是一个基于XHR二次进行封装的HTTP请求库；
代码：

// 发送 POST 请求
axios({
    method: 'post',
    url: '/user/12345',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
})

1
2
3
4
5
6
7
8
9
10

主要特点：

浏览器端发起XMLHTTPRequest请求；
node端发起http请求；
可进行请求终端；
可监听请求和返回；
支持Promise API；
可中断请求；
可自动转换json格式
客户端支持转换XSRF攻击；

axios和vue没关系，axios也不是随着Vue的兴起才广泛使用的，axios本身就是独立的请求库，跟用什么框架没关系；而且最初Vue官方推荐的请求库是vue-resouce，后来才推荐的axios；
axios不是xhr的子集，axios利用xhr进行了二次封装的请求库，xhr只是axios中的其中一个请求适配器，axios在nodejs端还有个http的请求适配器；axios = xhr + http

Ajax、Fetch、Axios三者的区别

AJax

Fetch

Axios

注意声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/428281

注意
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/428281