Ajax、Fetch、Axios三者的区别

最新推荐文章于 2024-10-01 20:12:28 发布

IsITGirl

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量832

点赞数 5

文章标签： ajax 前端

本文链接：https://blog.csdn.net/weixin_42575927/article/details/137553512

版权

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>

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>

主要特点：

使用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'
    }
})

主要特点：

浏览器端发起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

注意📢

axios和vue是没关系的，它并不是随着vue的兴起而被广泛使用的，而是axios本身就是一个独立的请求库，跟使用的框架并没有关系；最初vue官方推荐的请求库是vue-resouce，后来才推荐使用axios；axios是利用了xhr进行的二次封装库，xhr只是其中的一个http请求适配器；Axios = XHR + HTTP；