Vue，axios，fetch的结合和关系

 vue生命周期中mounted挂载结束

mounted: function () {
    //当el元素加载完 就要发出axios请求到后台获取date和number
    axios.all([getdate(), getnumber(), getClientInfo(), this.getTotal()]).then(
        axios.spread((d1, d2, d3, d4) => { //spread 完成并发请求 即四个请求完成后
            this.$data.time = d1.data.data;        
            this.$data.userid = d2.data.data;
            this.$data.clientInfo = d3.data.data;
            this.$data.total = d4.data.data.length;
            this.$data.onlineuserlist = d4.data.data;
        }));
},

使用生命周期中的mounted方法让元素加载完之后发送axios请求获取数据，如果是调用vue对象内的方法要在方法前加this，如果是外部的方法之间调用 比如说上面的getTotal就是vue里methods的方法 其它的都是外部定义的。因为调用的是all方法 那么只有在getdate，getnumber等四个方法全部是 resolve才会执行后面的then，下面去取出一个方法说明：

function getdate() {
    return axios.get("tools.action?op=date");
}

axios框架最大好处

1.从浏览器中创建XMLHttpRequests

2.支持promise API

3.自动转换json数据

4.防止跨站攻击 

 发送一个get请求：

axios.get("tools.action?op=date").then((data) => {
    console.log(data);                  //这里的data是promise对象
    console.log(data.data);             //这里是json数据{code: 1, data: '2021年12月31日'}
    console.log(data.data.data);        //这里json里具体的数据'2021年12月31日'
    //所以用axios直接return对象就行了 到时候d1.data.data就可以拿到'2021年12月31日'了
});

axios往下的底层是用fetch来访问数据，fetch的get方法

fetch("tools.action?op=date").then(function (data) {//promise成功就执行这个方法
    var promise = data.text();   //data是一个promise对象 取出结果文本部分
    return promise;             //传给下一个then
}).then(function (data) {
     //功能实现 显示到界面 没用vue
    var jsonObject = eval("(" + data + ")"); //拿到文本转成json字符串
    if (jsonObject.code == 1) {   //判断json中是否为1  {code: 1, data: '2021年12月31日'}
        document.getElementById("time").innerText = jsonObject.data;//将文本显示上去
    }
})

post方法

fetch("tools.action", {
    method: "post",        
    body: "op=date",
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded' //这个千万不能打错
    }
}).then(function (data) { //data存的是promise对象
    return data.text();   //获取响应的结果文本promise
}).then(function (data) { //这里才是真正结果的json字符串
    //这里才是真正的数据
    var jsonObject = eval("(" + data + ")");
    if (jsonObject.code == 1) {
        document.getElementById("time").innerHTML = jsonObject.data;
    }
});