0
点赞
收藏
分享

微信扫一扫

vue antd axios 使用

芭芭蘑菇 2022-09-20 阅读 56

接口请求:

安装: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中使用:

第一种:

vue antd  axios 使用_表单

 

 

第一种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);}
)


}
});
},


},

vue antd  axios 使用_ios_02

 

 

  

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);}
)


}
});
},


},

  

vue antd  axios 使用_json_03

 

 

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);}
)


}
});
},


},


};

  

vue antd  axios 使用_表单_04

 

 

结语:

axios通用写法:this.$axios(  

                {

                    url: '/demo-service/api/v1/book/',

                    method: 'post',

                    data: data,

                    headers:{'Content-Type': 'application/json;charset=UTF-8'},

                    transformRequest: function (data) {

                      // 对 data 进行任意转换处理

                      return JSON.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
};
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);}
)


}
});
},


},

  

 

 

 

vue antd  axios 使用_ios_05

 



举报

相关推荐

0 条评论