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 则
如果emulateJSON:false(默认) 则
关于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,所以无从判断是否登录超时,只能通过获取正确请求后必然返回的参数来判断接口是否请求成功。