ajax、axios、fetch的区别，整理

本是古典何须时尚 2024-03-26 09:49 57阅读 0赞

####  ####

### **Ajax**（xhr） ###

AJAX Ajax 即“AsynchronousJavascriptAndXML”（异步 JavaScript 和 XML），是指一种创建 交互式网页应用的网页开发技术。它是一种在无需重新加载整个网页的情况下，能够更新部分网页的技 术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加 载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须 重载整个网页页面。其缺点如下：

*  本身是针对MVC编程，不符合前端MVVM的浪潮
 *  基于原生XHR开发，XHR本身的架构不清晰
 *  不符合关注分离（Separation of Concerns）的原则
 *  配置和调用方式非常混乱，而且基于事件的异步模型不友好。

Ajax是一种概念，是一种标准和方法，比如jQuery有封装的Ajax方法来发送get和post请求，其底层原理为使用XMLHttpRequest对象实现。目前已经有Xhr2了，可以传文件，计算上传进度等等。Xhr当然可以自己实现ajax，就是略微麻烦些：

// 1. 创建 XMLHttpRequest 实例
    let xhr = XMLHttpRequest()
    // 2. 打开和服务器的连接
    xhr.open('get', 'URL')
    // 3.发送
    xhr.send()
    // 4. 接收变化。
    xhr.onreadystatechange = () => {
        if(xhr.readyState == 4 && xhr.status == 200){   // readyState: ajax 状态，status：http 请求状态
            console.log(xhr.responseText);   //响应主体
        }
    }

TIPS（补充：MVC和MVVM）：

1. **MVC**（Model View Controller）是软件工程中的一种软件架构模式，它把软件系统分为模型、**视图**和**控制器**三个基本部分。用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。

2.**MVVM**，是Model-View-ViewModel的简写，是M-V-VM三部分组成。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，其中ViewModel将视图 UI 和业务逻辑分开，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。 用双向数据绑定，view中数据变化将自动反映到viewmodel上，反之，[model][]中数据变化也将会自动展示在页面上。把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。 ![img][]

### **axios** ###

Axios 是一种基于Promise封装的HTTP客户端，相比jq中的ajax更轻量化， 它内部有两个拦截器，分别是request拦截器和response拦截器。 在SPA应用中，通常会使用token进行用户身份认证，这就要求每次请求必须携带用户的身份信息，针对这个需求，为了避免在每个请求中单独处理，我们可以通过封装统一的request函数来为每隔请求统一添加token信息。这就是拦截器的作用。 其特点如下：

*  浏览器端发起XMLHttpRequests请求
 *  node端发起http请求
 *  支持Promise API
 *  监听请求和返回
 *  对请求和返回进行转化 ，自动转换json数据
 *  客户端支持抵御 CSRF 攻击

axios常用的方法有`get`、`post`、`put`、`patch`、`delete`等。其中`get`和`post`返回的都是`promise`对象，可以使用`promise`方法 。目前vue中用的怪多。get方法例子：

axios.get('apiURL', {
        param: {
            id: 1
        }
        // param 中的的键值对最终会 ? 的形式，拼接到请求的链接上，发送到服务器。
    }).then(res => {
        console.log(res);
    })
    .catch( error => {
        console.log(error)
    }

#### **关于axios的知识点：** ####

axios拦截器执行顺序：

//添加两个请求拦截，看到时候先执行哪个
    axios.interceptors.request.use(config => {
      console.log(`请求1`);
      return config;
    });
    axios.interceptors.request.use(config => {
      console.log(`请求2`);
      return config;
    });
    
    //添加两个响应拦截，看到时候先执行哪个
    axios.interceptors.response.use(response => {
      console.log(`响应1`);
      return response.data;
    });
    axios.interceptors.response.use(response => {
      console.log(`响应2`);
      return response;
    });
    
    // 发送请求 
    axios.get('/posts')
      .then(response => {
        console.log('success');
      }) 
    
    //**************结果*********************//
    console.log("请求2");
    console.log("请求1");
    console.log("响应1");
    console.log("响应2");
    console.log("success");
    //原因，请求拦截使用的是数组的unshift方法，响应拦截使用的是push方法

**fetch**

fetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。Fetch是 基于promise设计的。Fetch的代码结构比起ajax简单多。fetch不是ajax的进一步封装，而是原生js， 没有使用XMLHttpRequest对象。 `fetch`是http请求数据的方式，它使用Promise，但不使用回调函数。`fetch`采用模块化设计，通过数据流处理数据，对于请求大文件或网速慢的情况相当有用。默认情况下fetch不会接收或发送cookies。

*  语法简洁，更加语义化 基于标准
 *  Promise 实现，支持 async/await
 *  更加底层，提供的API丰富（request, response）
 *  脱离了XHR，是ES规范里新的实现方式

缺点：

*  过于底层，很多状态码没有进行封装。 只对网络请求报错，对400，500都当做成功的请求 。
 *  不像XHR，fetch不能检测请求进度。
 *  不能阻断请求， 请求过程继续在后台运行，造成了流量的浪费 。 不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制 。
 *  兼容性差

![4818812dc757479f905d23b194d9bd9f.png][]

[model]: https://so.csdn.net/so/search?q=model&spm=1001.2101.3001.7020
[img]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/63ac3b3ab8b54d2fb92facec7851fe7c.png
[4818812dc757479f905d23b194d9bd9f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/8981e1f430714a0ba27fa789aa00993d.png