fetch、axios、ajax的比较 - 码农知识堂

fetch、axios、ajax的比较
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
```
相关阅读:
短期风速预测|LSTM|ELM|批处理（matlab代码）
C/C++源程序到可执行程序exe的全过程（及汇编和反汇编的区别）
OpenAI的组织形态、决策机制与产品构建
 黑马程序员微服务分布式搜索引擎3
基于物联网的防盗报警器设计与实现
 基础复习——利用Room简化数据库操作——重点
 Midjourney是个什么软件？midjourney订阅教程
 防爆五参数气象仪的科技力量
 QT-地形3D
Linux 下如何调试代码
原文地址：https://blog.csdn.net/qq_43733682/article/details/126992257