vue antd axios 使用

接口请求：

安装：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(  

                {

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

          }
        });
      },


    },