Vue实战之Axios 基本使用和vue生命周期
10.1 引言
Axios
是一个异步请求技术,核心作用就是用来在页面中发送异步请求,并获取对应数据在页面中渲染 页面局部更新技术 Ajax
10.2 Axios 第一个程序
中文网站:https://www.kancloud.cn/yunye/axios/234845
安装: https://unpkg.com/axios/dist/axios.min.js
10.2.1 GET方式的请求
//发送GET方式请求
axios.get("http://localhost:8989/user/findAll?name=xiaochen").then(function(response){
console.log(response.data);
}).catch(function(err){
console.log(err);
});
10.2.2 POST方式请求
//发送POST方式请求
axios.post("http://localhost:8989/user/save",{
username:"xiaochen",
age:23,
email:"xiaochen@zparkhr.com",
phone:13260426185
}).then(function(response){
console.log(response.data);
}).catch(function(err){
console.log(err);
});
10.2.3 axios并发请求
并发请求
: 将多个请求在同一时刻发送到后端服务接口,最后在集中处理每个请求的响应结果
//1.创建一个查询所有请求
function findAll(){
return axios.get("http://localhost:8989/user/findAll?name=xiaochen");
}
//2.创建一个保存的请求
function save(){
return axios.post("http://localhost:8989/user/save",{
username:"xiaochen",
age:23,
email:"xiaochen@zparkhr.com",
phone:13260426185
});
}
//3.并发执行
axios.all([findAll(),save()]).then(
axios.spread(function(res1,res2){ //用来将一组函数的响应结果汇总处理
console.log(res1.data);
console.log(res2.data);
})
);//用来发送一组并发请求
11. Vue 生命周期
生命周期钩子
====>生命周期函数
# Vue生命周期总结
1.初始化阶段
beforeCreate(){ //1.生命周期中第一个函数,该函数在执行时Vue实例仅仅完成了自身事件的绑定和生命周期函数的初始化工作,Vue实例中还没有 Data el methods相关属性
console.log("beforeCreate: "+this.msg);
},
created(){ //2.生命周期中第二个函数,该函数在执行时Vue实例已经初始化了data属性和methods中相关方法
console.log("created: "+this.msg);
},
beforeMount(){//3.生命周期中第三个函数,该函数在执行时Vue将El中指定作用范围作为模板编译
console.log("beforeMount: "+document.getElementById("sp").innerText);
},
mounted(){//4.生命周期中第四个函数,该函数在执行过程中,已经将数据渲染到界面中并且已经更新页面
console.log("Mounted: "+document.getElementById("sp").innerText);
}
2.运行阶段
beforeUpdate(){//5.生命周期中第五个函数,该函数是data中数据发生变化时执行 这个事件执行时仅仅是Vue实例中data数据变化页面显示的依然是原始数据
console.log("beforeUpdate:"+this.msg);
console.log("beforeUpdate:"+document.getElementById("sp").innerText);
},
updated(){ //6.生命周期中第六个函数,该函数执行时data中数据发生变化,页面中数据也发生了变化 页面中数据已经和data中数据一致
console.log("updated:"+this.msg);
console.log("updated:"+document.getElementById("sp").innerText);
},
3.销毁阶段
beforeDestory(){//7.生命周期第七个函数,该函数执行时,Vue中所有数据 methods componet 都没销毁
},
destoryed(){ //8.生命周期的第八个函数,该函数执行时,Vue实例彻底销毁
}