Vue学习记录—配置Axios及使用

Vue配置Axios并发送GET / POST请求

1. 下载Axios，qs (axios.post时传递参数)

    //webpack下载
    $ npm install axios  // $ npm i axios -S 
    $ npm install qs
    
    //或者使用CDN：（？）
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2. main.js中配置

import axios from 'axios'
import qs from 'qs';

Vue.config.productionTip = false;
Vue.prototype.axios = axios; 
Vue.prototype.qs = qs 
//默认后台接口前缀
axios.defaults.baseURL='http://localhost:8090/graduationProject/haitunAdmin/public/admin/'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

new Vue({
  el: '#app',
  router,
  axios,
  components: { App },
  template: '<App/>'
})

3. 组件中使用

    //get请求
    this.axios.get('url')
            .then((response)=>{ 
            // ...
            })
            
    //get传递参数
    this.axios.get('url',{params:{id:eventId}})
              .then((response)=>{ 
              //...
              })  
                  
    //post请求
    this.axios.post('url',qs.stringify(this.from))
            .then((response)=>{
            //...
            })