　　一、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'; //导入axiosaxios.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跨域请求}

转载于:https://www.cnblogs.com/ldq678/p/10716818.html

你可能感兴趣的文章