详解在webpack中使用axios

佚名 6年前 (2019-04-16) 随笔 2232人围观抢沙发百度已收录

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

　　本文讲述的是如何在webpack中，结合vue，使用axios，来实现AJAX异步请求。

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

　　本文不讲述如何在传统的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.barteam.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;
            });
        }