axios的使用

axios是vue官方推薦的http庫，詳情見官方中文文檔。

安裝：

npm install axios

安裝依賴：

npm install --save axios vue-axios

配置模板：

//main.js中
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
 
Vue.use(VueAxios, axios)
//而後你就能愉快地使用axios啦

若是不想這樣安裝，也能夠快速引用它：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

如何使用：

有好幾種方法，get post delete put patch 什麼的，不過我一般就用get和post兩種，因此我就記錄這種中的使用方法了。

let data = {   //要傳的參數
    'loginName':'123456',
    'passWord':'123456',
    'updateSign':'52af3ce8a82f62707789fe00899ed3f0',
    'isLogin':'1'
}


//post請求

this.axios.post('/api/user/sickUserLogin/3',data)
    .then((response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });
 
    
//get請求

this.axios.get('/api/user/sickUserLogin/3',{params:data})
    .then((response) => {
        console.log(response.data);
        console.log(response);   
    })
    .catch(function (error) {
        console.log(error);
    });

這裏要注意一點的是：get和post請求的傳參方式是不同的，緣由能夠參考這裏

axios.get('url', {params: data});
axios.post('url', data);

//get請求的參數是拼接url字符串傳遞的；
//post請求的參數是經過data請求主體傳遞的；

參數格式：

axios的默認參數格式是json字符串，傳參方式就像上面那個demo同樣便可。可是若是你想以key：value的方式傳參，則須要作一點改變：參考這裏
注意：若是你的請求方法是post，又規定了參數格式是application/x-www-form-urlencoded，則必需要使用下面這些方法中的一種。（我在寫demo的時候測試了一下，post方法下json傳參格式是失敗的，必需要改爲鍵值對的格式，不然會報錯）
主要推薦這種寫法：

var qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));

這個方法須要先安裝一下qs：

npm install qs

import qs from 'qs'

Vue.prototype.qs = qs;  //全局定義，使用的時候用this.qs.stringify(data)便可

還有另外一種寫法淺顯易懂：

var params = new URLSearchParams();    //這種寫法不須要引入qs
params.append('collectId',"16");       //你要傳給後臺的參數值 key/value
params.append('collectTye',"2");
params.append('isCancel',"2",);


this.$axios({
    method: 'post',
    url:url,
    data: params 
}).then((res)=>{

})

設置axios的baseURL：

//在main.js中：
axios.defaults.baseURL = 'http://api.eeesys.com:18087/';
//這些具體的寫法能夠多看幾遍文檔，就懂了，我也不是很懂
//根據個人測驗，這樣寫了以後，請求會忽略掉proxyTable中的配置，直接請求這個地址，這樣在生產環境下就能夠跨域了，不知道是否是這樣的

從新定義一個axios實例：

const $axios = axios.create({
    baseURL: 'http://api.eeesys.com:18087/',
    timeout: 5000,
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    }
});

// 初始化默認post header,這裏規定了post請求的傳參格式是application/x-www-form-urlencoded
//若是不這樣寫，後臺接收到的參數是null
$axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
Vue.prototype.$axios = $axios;

這樣就能夠在代碼中使用本身定義的axios實例，沒有配置的屬性會繼承lib/defaults.js文件中的設置