用vue构建项目笔记6(在vue中使用vue resource)

jquery用的是$.ajax。我们在vue项目中保持代码尽量精简而不引入jq的话，官方推荐vue resource.

使用vue resource有一个优势，就是this指向不会改变，即在调用完成之后直接写this就能调用到vue数据和方法，而如果写ajax，this指向变化，不得不在ajax之前先定义this指向另一个容器。

下面是一点使用vue resource的过程

1.安装 cnpm install vue-resource --save-dev

2、引入 找到main.js文件

import VueResource from 'vue-resource'Vue.use(VueResource);

然后就可以在代码中愉快的调用了。

3、使用

this.$http.post(this.jsCtx+'aae',{id:id,state:state},{emulateJSON:true}).then(function(response){if(response.data.result==0){   }else{   alert(response.data.msg)}})

这里有几个地方需要注意：

1、我用的是post请求的简略写法，如果是get请求，这样参数发送不了，下面是不简略的统一写法

this.$http({            url: this.jsCtx+'aa',            method: 'get',            // 请求体重发送的数据            params: {                id:1            },            // 设置请求头            headers: {                'Content-Type': 'x-www-from-urlencoded'            }        }).then(function (response) {            if(response.data.result==0){    }else{    }        }, function () {            // 请求失败回调        });

get请求想要发送数据需要把数据写在params中，数据就会拼入链接后面发送了。post请求写在data中，其实也就是我第一种简略方法即可。

2.、第二个需要注意的是emulateJSON:true参数，官方描述大概就是默认是false，如果数据穿不过去就它写成true，其实就是关联到header的参数。

如果emulateJSON:true 则

Content-Type:

application/x-www-form-urlencoded （相当于form表单提交）

如果emulateJSON:false(默认) 则

Content-Type:

application/json;charset=UTF-8

关于get请求怎么改header参数已经在上面的代码中体现了。
如果传JSON.stringify()的参数，是用emulateJSON:false的，除此之外，基本都要把emulateJSON改为true.

此外，官方还提供了可以统一设置控制请求接口前，请求后的操作，可以通过返回数据进行统一控制

Vue.http.interceptors.push(function ( request, next ) {    // 请求发送前的处理逻辑//console.log(request)//console.log(next)    next(function (response) {       // 请求发送后的处理逻辑    // 更具请求的状态， response参数会返回给 successCallback或errorCallback//console.log(response.data.result)if(response.data.stats == undefined){this.$router.push('/')}//        return response    });    });

这个方法我是写在我上一篇文章的公用方法里的，可以让每个组件都调用到此方法具体如何创建公用方法js 移步

http://blog.csdn.net/qq_39507727/article/details/77482051点击打开链接

我在写这个方法的时候其实是想获取除200以外的状态值的，后台接口之前用的是jsp，当判断到用户尚未登录或者登录超时后，接口状态返回302，然后自动打开登录页面。然而我用这个接口的时候，根本找不到302这个状态值，返回的直接是打开登录页面的状态值200，所以无从判断是否登录超时，只能通过获取正确请求后必然返回的参数来判断接口是否请求成功。