接口请求：
安装：npm install axios --save
main.js配置
import axios from ‘axios‘; import qs from ‘qs‘; Vue.prototype.$axios=axios; Vue.prototype.qs=qs; axios.defaults.baseURL=‘http://localhost:8000/‘
axios再.vue中使用：
第一种:
第一种get请求,带参数:{params: { ‘key‘: ‘value‘ }},
export default {
beforeCreate() {
this.form = this.$form.createForm(this, { name: ‘normal_login‘ });
},
methods: {
// submit method
handleSubmit(e) {
e.preventDefault();
this.form.validateFields((err, values) => {
if (!err) {
console.log(‘Received values of form: ‘, values);
this.$axios.get(
‘/demo-service/api/v1/author/‘
{params: { ‘key‘: ‘value‘ }}
).then(res => {console.log(res);}
)
.catch(
error=> {console.log(error);}
)
}
});
},
},
post请求：
默认axios是application/json,所以
export default {
beforeCreate() {
this.form = this.$form.createForm(this, { name: ‘normal_login‘ });
},
methods: {
// submit method
handleSubmit(e) {
e.preventDefault();
this.form.validateFields((err, values) => {
if (!err) {
let data={
name:values.userName,
price:values.password,
publish:1
};
console.log("xxxxxxxxxx",data);
this.$axios.post(
‘/demo-service/api/v1/book/‘,
data,
).then(res => {console.log(res);}
)
.catch(
error=> {console.log(error);}
)
}
});
},
},
2.application/x-www-form-urlencoded,由于使用了qs.stringify(data)，会自动按表单请求
export default {
beforeCreate() {
this.form = this.$form.createForm(this, { name: ‘normal_login‘ });
},
methods: {
// submit method
handleSubmit(e) {
e.preventDefault();
this.form.validateFields((err, values) => {
if (!err) {
let data={
name:values.userName,
price:values.password,
publish:1
};
console.log("xxxxxxxxxx",data);
this.$axios.post(
‘/demo-service/api/v1/book/‘,
this.qs.stringify(data)
).then(res => {console.log(res);}
)
.catch(
error=> {console.log(error);}
)
}
});
},
},
3.muti-form-data:
export default {
beforeCreate() {
this.form = this.$form.createForm(this, { name: ‘normal_login‘ });
},
methods: {
// submit method
handleSubmit(e) {
e.preventDefault();
this.form.validateFields((err, values) => {
if (!err) {
let data={
name:values.userName,
price:values.password,
publish:1
};
let data2=new FormData();
data2.append(‘code‘,‘1234‘);
data2.append(‘name‘,‘yyyy‘);
console.log("xxxxxxxxxx",data);
this.$axios.post(
‘/demo-service/api/v1/book/‘,
data2
// this.qs.stringify(data)
).then(res => {console.log(res);}
)
.catch(
error=> {console.log(error);}
)
}
});
},
},
};
结语：
axios通用写法：this.$axios(
export default {
beforeCreate() {
this.form = this.$form.createForm(this, { name: ‘normal_login‘ });
},
methods: {
// submit method
handleSubmit(e) {
e.preventDefault();
this.form.validateFields((err, values) => {
if (!err) {
let data={
name:values.userName,
price:values.password,
publish:1
};
let data2=new FormData();
data2.append(‘code‘,‘1234‘);
data2.append(‘name‘,‘yyyy‘);
console.log("xxxxxxxxxx",data);
this.$axios(
{
url: ‘/demo-service/api/v1/book/‘,
method: ‘post‘,
data: data,
headers:{‘Content-Type‘: ‘application/json;charset=UTF-8‘}
}
// this.qs.stringify(data)
).then(res => {console.log(res);}
)
.catch(
error=> {console.log(error);}
)
}
});
},
},
原文：https://www.cnblogs.com/SunshineKimi/p/14701665.html