axios在Vue中使用
1.引入axios.js文件
1.1 导入axios.min.js文件
<script src="./axios.min.js"></script>
1.2 导入axios.min.js文件
2 写好代码结构
如:
var vm=new Vue({
el:'#app',
data:{
//定义js使用的变量,设置初始值
},
created () {
//Vue中生命周期的方法
//在数据显示之前执行这个方法
//一般来讲,调用方法得到数据
},methods:{
//定义使用到的一些方法
}
});
3 在方法中使用axios请求数据
如:
data:{
//定义js使用的变量,设置初始值
teacherList:[]
},
created () {
//Vue中生命周期的方法
//在数据显示之前执行这个方法
//一般来讲,调用方法得到数据
this.getTeacherList();
},
methods:{
//定义使用到的一些方法
getTeacherList(){
//axios发送ajax请求得到数据
axios.get("请求的后台接口路径")
.then(response=>{
//response 是调用后台接口返回的数据
//通过response获取后台接口返回的数据
})
.catch(error=>{
//error是错误信息
})
}
}
在methods中定义一些方法,比如“获取所有讲师”、“根据Id查询”等,在这些方法中调用axios获取后代接口返回的数据,axios.get()是请求方式,then()是请求成功之后需要执行的方法,如果出错则执行catch()方法。
3.1 axios的几种请求方式
3.1.1 get请求
一般多用于获取数据
//请求的地址实际为 localhost:8080/url?id=12
带参数:axios.get('/url', {params: {id: 12}})
不带参数: axios.get('/url')
3.1.2 post请求
主要提交表单数据和上传文件,传参数据必须放在消息主体中
let data = {}
let config = {}
方式一: axios.post('/url',data,config)
方式二:
this.$axios.post(url, {a: '1'})
.then(response => {
//成功返回
console.log(response);
})
.catch(error => {
//失败返回
console.log(error);
});
/*---------------------------------*/
其中 data可以有两种格
form-data(图片上传,文件上传)
applicition/json(目前比较流行)
上面两种方法 都是 appliction/json格式
如下为: form-data
let formData = new FormData()
let data = {id:12}
for (let key in data) {
formData.append(key, data[key])
}
axios({
methods: 'post',
url: '/url',
data: formData
})
//该请求发出之后可以在浏览器中查看此次请求的
//request header里面content-type: 为 form-data形式
3.1.3 put请求
对数据进行更新
该请求和post类似,只是请求方法不同
3.1.4 delete请求
参数可以放在url上也可以和post一样放在请求体中
//参数在url
//params很重要
axios.delete('/url', {params: {id: 12}})
//参数在请求体中
//将params改为 data就行
axios.delete('/url', {data: {id: 12}})
4 给初始化参数赋值显示
如:
//查询所有讲师
var vm=new Vue({
el:'#app',
data:{
//定义js使用的变量,设置初始值
teacherList:[]
},
created () {
//Vue中生命周期的方法
//在数据显示之前执行这个方法
//一般来讲,调用方法得到数据
this.getTeacherList();
},methods:{
//定义使用到的一些方法
getTeacherList(){
//axios发送ajax请求得到数据
axios.get("teacher.json")
.then(response=>{
//response 是调用后台接口返回的数据
//通过response获取后台接口返回的数据
console.log(response);
this.teacherList = response.data.data.items;
console.log(this.teacherList);
})
.catch(error=>{
//error是错误信息
})
}
}
});