fetch、axios、ajax的比较

最新推荐文章于 2024-11-19 13:43:23 发布

weifeng_bushileng

最新推荐文章于 2024-11-19 13:43:23 发布

阅读量1k

点赞数

分类专栏： vue.js JS的学习文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/qq_43733682/article/details/126992257

版权

JS的学习同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

vue.js

10 篇文章 0 订阅

订阅专栏

fetch、axios、ajax的比较
ajax可以在不更新全局的情况下更新局部页面，通过在与服务器进行数据交换，可以使页面实现异步更新。
ajax的原理是：通过XHR对象来向服务器发起异步请求，从服务器上获得数据，然后用JS来操作DOM更新页面。
通过XMLHttpRequest.open()方法与服务器建立连接。XMLHttpRequest.send()方法中如果Ajax请求是异步的，那么这个方法发送请求后就会返回，如果是同步的，那么请求必须响应后才能返回。
缺点：
本是针对MVC架构，不符合前端MVVM的浪潮（补充：MVVM是Model-View-ViewModel的简写。是M-V-VM三部分组成，他是MVC的改进版，是将其中的View的状态和行为抽象化。采用的是双向数据绑定，MVVM的核心就是关注model的变化，让MVVM 框架利用自己的机制自动更新DOM ，所谓的数据-视图分离，数据是不影响视图的。）
基于原生的XHR开发
配置和调用的方式混乱。
axios
axios的原理是：使用 promise 封装的 ajax，他内部有两个拦截器，分别是 request 拦截器和 response 拦截器。
请求拦截器的作用是：在请求发送之前进行一些操作，例如在每个请求上加入taken
响应拦截器的作用是：接受到响应后做一些操作，例如登录失效后，重新登录跳转到登录页。
特点：
由浏览器发端发起的请求，在浏览器中创建XHR
支持promise API
监听请求和返回
更好的格式化，自动将数据转换为json数据
安全性更高，可以抵御CSRF的攻击
常用的方法：
axios常用的方法有：get,post,put,patch,delete等，其中get和post返回的都是promise对象，可以使用promise方法。
相关的配置：
URL：用于请求服务器的URL
method：请求方法，默认为get
baseURL：会自动加到URL的前面
proxy：用于配置代理
transformRequest：允许在服务器发送请求之前修改请求的数据
发送请求拿到数据的一个过程：请求拦截器、发送请求、响应拦截器、响应回调的联系
3. fetch
fetch是http请求数据的方式，它使用promise，但是不使用回调函数，fetch采用模块化设计，通过数据流处理数据，对于请求大文件或者网速慢的情况是很有用的，默认的情况下，fetch是不会接收和发送cookies的
优点：
采用模块化思想，将输入、输出。状态跟踪分离
基于promise，返回一个promise
缺点：
过于底层，有很多的状态码没有进行封装
无法阻断请求
兼容性比较差
无法检测请求进度
4.fetch、ajax、axios的区别
传统的ajax利用的是HMLHttpRequest这个对象，和后端进行交互。而JQury ajax是对原生的XHR的封装，多请求间有嵌套的话，就会出现回调地域的问题
axios使用promise封装XHR，解决了回调地域的问题。
fetch没有使用XHR,使用的是promise
在这里插入图片描述

最后的总结：
Ajax是一种web数据交互的方式，他可以使页面在不重新加载的情况下请求数据并进行局部更新，它的内部使用了XHR来进行异步请求。
Ajax在使用XHR发起异步请求时得到的是XML格式的数据，如果想要json格式，需要额外的转换；Ajax本身是针对MVC格式的，不符合现在的MVVM框架，ajax有回调地域的问题。Ajax的配置复杂。
fetch是HXR的代替品，它基于promise实现的，并且不使用回调函数，他是采用的模块化结构设计，使用数据流进行传输，对于大文件和网速慢的情况是非常友好的，但是fetch不会对请求和响应进行监听；不能阻断请求。对于底层，对一些代码是没有封装的；他的兼容型也是很差的。
axios是基于promise对XHR进行封装，他的内部有两个拦截器。axios可以对请求和响应进行监听，返回promise对象，可以使用promise的API；返回JSON 格式的数据，由浏览器发起的请求，安全性更高，可以抵御CSRF的攻击。
XHR：全称为XMLHttpRequest，用于与服务器交互数据。是ajax功能所依赖的对象、jQuery中的ajax就是对XHR的封装。
利用XMLHttpRequest模块实现ajax的一个实例
实现Ajax的实例
JavaScript

<body>
  <script>
  function ajax(url){
    const xhr.open=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>