vue-resource配置全局请求根域名及全局启用emulateJSON

一、全局设置vue-resource请求的根域名

场景:若是数据接口的路径直接写死 那么若换了个域名 则里面的接口地址全部都要挨个修改
若请求的接口比较多 那么会是很麻烦的一件事

所幸的是 vue-resource支持设置全局请求根域名 一步到位

配置

Vue.http.options.root="接口根域名";

例如:

Vue.http.options.root="http://localhost:8080/";

( 后面的斜杠[ / ]可不加 )

若原来请求的接口地址是http://localhost:8080/user/addUser
那么 配置完后 在请求接口的时候直接请求路径即可 无需带上根域名 vue-resource会自动进行拼接

例如:

this.$http.post("user/addUser",{
                       name:this.name
                   }).then(result=>{
                       ...
                   });

值得注意的是:请求的路径前面不能带上斜杠[ / ]

不能是诸如/user/addUser此类格式 否则不启用根路径拼接

✔正确写法:user/addUser


二、全局启用emulateJSON

关于emulateJSON的作用:

启用之后 请求会以application/x-www-form-urlencoded作为Content-Type进行发送 就像普通的HTML表单一样

通常做法:

this.$http.post("user/addUser",{
                       name:this.name
                   },{emulateJSON:true}).then(result=>{
                       ---
                   });

每个要传参的请求都要加上个emulateJSON:true 这样会比较繁琐
但在全局启用之后 就无须挨个进行启用了

全局启用emulateJSON:true选项 其实写法和配置根域名很类似:

Vue.http.options.emulateJSON=true;

若不启用 则后台必须将结果转换为JavaBean方可接收到数据
拿Java来说 后台必须加上@RequestBody注解

但启用emulateJSON之后 后台即可直接接收到数据了


配置的位置也是有讲究的:

由于Vue是按顺序加载的 因此配置的位置必须在创建Vue实例的前面

<script>
        // 全局设置vue-resource请求的根域名
        Vue.http.options.root="http://localhost:8080";
        // 全局启用emulateJSON:true选项
        Vue.http.options.emulateJSON=true;

		// 创建Vue实例
        var vm=new Vue({
           el:'#app',
           data:{},
           methods:{},
        });
</script>

发布了204 篇原创文章 · 获赞 13 · 访问量 75万+

猜你喜欢

转载自blog.csdn.net/Piconjo/article/details/105632236