詳解在webpack中使用axios

　　vue更新到2.0之后,尤大就宣告不再對vue-resource更新,而是推薦的axios。

　　本文講述的是如何在webpack中，結合vue，使用axios，來實現AJAX異步請求。

　　本文不講述如何在傳統的HTML頁面中，通過<script>標簽引入 axios.js包，然后發請求。

　　一、axios基本用法

　　第一步：使用npm下載axios模塊

　　 npm i axios -S 

　　第二步：在項目中導入axios模塊。一般情況下，我們開發項目的時候，都會使用入口文件main.js，然后把vue組件單獨放置其他目錄中，封裝成以.vue為后綴的獨立模塊。往往我們並不直接在main.js中發出AJAX請求，一般情況下，我們都是在具體的組件里發出AJAX請求，來完成具體的業務。

　　於是問題來了，我們該在哪里導入axios模塊呢？我們是不是要在每一個.vue文件中，也就是每個組件中都導入axios呢？

　　答案是否定的。我們只需要在main.js這個入口文件中導入axios即可，然后我們需要把這個模塊對象掛載到Vue對象的原型上。這樣我們就可以在各個組件中使用它了。

　　下面我們在main.js中導入axios，代碼如下：　　

import Vue from 'vue';  //導入vue模塊

import axios from 'axios'; //導入axios
axios.defaults.baseURL = 'http://www.xxxxx.cn';  //配置根域名
Vue.prototype.$ajax = axios;  //把axios掛載到Vue的原型上

 　　這里需要注意的是，axios不能通過Vue.use(axios)來掛載到對線身上，所以我們只能把它掛到Vue.prototype原型上。

　　第三步：在組件中使用

　　使用就很簡單了。比如我們在組建中點擊按鈕發出AJAX請求　　

getnewsinfo: function(){
            this.$ajax({
                method: 'get',
                url: '/news/newsinfo?newsid=2'
            })
            .then(response => {
                this.id = response.data.Data[0].id;
                this.content = response.data.Data[0].content;
                this.title = response.data.Data[0].title;
                this.add_time = response.data.Data[0].add_time;
                this.click_count = response.data.Data[0].click_count;
                this.img_url = response.data.Data[0].img_url;
                this.author = response.data.Data[0].author;
            });
        }

 　二、帶參數的請求

　　如果get請求，既可以像上栗一樣，在url中拼寫傳參。也可以按照下面的方式傳參。　　

this.$ajax({
     method: 'get',
     url: 'comment',
     params: { //必須用params這個key
          srcid: this.id,
     }
}).
then(response => {
　　// console.log(response.data)                
})

　　唯一需要注意的是get傳參，需要使用的key是params。

　　如果是post傳參，需要如下使用：　　

this.$ajax({
    method: 'post',
    url: 'comment',
    data: qs.stringify({  //post傳參，使用的key必須是data
        srcId : this.id, 
        content: this.msg,
        add_time: new Date()
    })
}).
then(response => {
    // console.log(response.data);   
});

　　這里需要注意兩點：

　　1.post傳參，使用的key必須是data，這跟get傳參不同。

　　2.傳遞的參數一般都是個js對象，這個對象不能直接傳遞，需要使用qs.stringify( )轉換一下，否則服務端講無法獲取前端傳遞的這個對象（獲取到的數據將是Null），這一點務必切記。

　 三、解決跨域問題

　　跨域的問題有點復雜。既可以直接讓服務端允許跨域，也可以通過客戶端跨域。至於jsonp就有點小限制，因為jsonp只支持get請求。所以如果需要支持跨域post請求，那么還是不能用jsonp。

　　我在項目中配置了服務端允許跨域，但是實際使用的時候get請求可以，post請求仍然被拒絕了。於是查了下資料，按如下方法配置了前端的請求頭，得到了解決。不知道是個例還是普遍如此，還有待繼續驗證；不過這里把前端請求頭的設置方法也寫下來。　　

axios.defaults.headers = {
    'Content-Type': 'application/x-www-form-urlencoded' //設置axios 發出post跨域請求
}