用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，所以无从判断是否登录超时，只能通过获取正确请求后必然返回的参数来判断接口是否请求成功。