1.安装axios
npm i axios -S
方案一:修改原型链
首先,在main.js中引入 import axios from 'axios'
还是无法在组件中使用axios的,但如果将vue改为vue的原型链,就可以le
Vue.prototype.$ajax=axios
开始发送请求
methods:{
<!--不带参数的情况下-->
lodeData(){
this.$axjx.get(`url`)
.then(function (res) {
console.log(res);
if(res.status==1){
}
}).catch(function (err) {
console.log(err);
});
}
<!--或者是-->
lodeData2(){
this.$axjx.post(`url`)
.then(function (res) {
console.log(res);
if(res.status==1){
}
}).catch(function (err) {
console.log(err);
});
}
<!--带参数的情况下-->
}
如果想要发送带json格式参数的请求,则需要使用qs模块来处理参数
首先在main.js中导入qs模块 import qs from 'qs'
然后
Vue.prototype.$qs=qs
methods:{
<!--带参数的情况下-->
lodeData3(){
this.$axjx.post(`url`,
this.$qs.stringify({
name:'useName'
})
).then(function (res) {
console.log(res);
if(res.status==1){
}
}).catch(function (err) {
console.log(err);
});
}
}
注意:
如果在vue中使用,那么vue中data中的数据无法通过this直接引用,需要做如下处理
methods:{
<!--带参数的情况下-->
lodeData3(){
var that = this(重点代码)
this.$axjx.post(`url`,
this.$qs.stringify({
name:'useName'
})
).then(function (res) {
console.log(res);
that.data=res.data(重点代码)
console.log(that.data);
}).catch(function (err) {
console.log(err);
});
}
}