详解在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跨域请求
}