详解在webpack中使用axios
vue更新到2.0之后,尤大就宣告不再对vue-resource更新,而是推荐的axios。
本文讲述的是如何在webpack中，结合vue，使用axios，来实现AJAX异步请求。
本文不讲述如何在传统的HTML页面中，通过<script>标签引入 axios.js包，然后发请求。
第一步：使用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?news
})
.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跨域请求
}
