原生ajax和axios比较

axios方式一：

//使用axios，vue.js 2.0可以使用axios来完成ajax请求，
//axios是一个基于promise的http库
    test3() {
      axios.get("url").then((res) => {
        this.tableData4 = res.data.data;
      });
    },

axios方式二：

    //可以通过向 axios 传递相关配置来创建请求。
    test4() {
      axios({
        methos: "get",
        url: "url",
      }).then((res) => {
        this.tableData4 = res.data.data;
      });
    },

原生ajax

   test5() {
      var xhttp = new XMLHttpRequest();
      xhttp.open("GET", "url", true);
      xhttp.send();
      var that = this; //这个vue组件实例
      xhttp.onreadystatechange = function () {
        //this指向xmlhttprequest对象，对象方法中的this指向这个实例对象
        if (this.readyState == 4 && this.status == 200) {
          that.tableData = JSON.parse(this.responseText).data;
        }
      };
    },

区别

一、写法：
原生ajax：
①新建一个XMLHttpRequest对象实例
②规定请求类型
③发送请求
④处理响应
axios：
①导入axios库
②配置axios

二：对于json数据的处理
原生ajax：
需要使用JSON.parse()方法将返回的json数据转换为js对象
axios：
使用 response.data 读取 JSON 数据，结果直接就是js对象，无需转换

三：this------将相应数据赋值给vue实例的data
原生ajax：
在赋值前需要进行this的转换

var that = this; //这个vue组件实例
      xhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
          that.tableData = JSON.parse(this.responseText).data;
        }
      };

axios：
直接使用this.data赋值，无需转换this的指向。

this.tableData4 = res.data.data