vue-resource 拦截器使用详解
更新时间：2017年02月21日 17:11:46 作者：杜培东
本篇文章主要介绍了vue-resource 拦截器使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
在vue项目使用vue-resource的过程中，临时增加了一个需求，需要在任何一个页面任何一次http请求，增加对token过期的判断，如果token已过期，需要跳转至登录页面。如果要在每个页面中的http请求操作中添加一次判断，那么会是一个非常大的修改工作量。那么vue-resource是否存在一个对于任何一次请求响应捕获的的公共回调函数呢？答案是有的!
vue-resource的interceptors拦截器的作用正是解决此需求的妙方。在每次http的请求响应之后，如果设置了拦截器如下，会优先执行拦截器函数，获取响应体，然后才会决定是否把response返回给then进行接收。那么我们可以在这个拦截器里边添加对响应状态码的判断，来决定是跳转到登录页面还是留在当前页面继续获取数据。
下边代码添加在main.js中
Vue.http.interceptors.push((request, next) => {
console.log(this)//此处this为请求所在页面的Vue实例
// modify request
request.method = 'POST';//在请求之前可以进行一些预处理和配置
// continue to next interceptor
next((response) => {//在响应之后传给then之前对response进行修改和逻辑判断。对于token时候已过期的判断，就添加在此处，页面中任何一次http请求都会先调用此处方法
response.body = '...';
return response;
});
});
在知道此方法之前，鄙人想了一个笨方法，但是也能在一定程度上降低修改工作量。方法是为Vue绑定一个this.$$http.get方法取代this.$http.get方法，每个页面的http请求添加个$在$http前即可。
// ajax.js
function plugin(Vue){
Object.defineProperties(Vue.prototype,{
$$http:{
get(){
return option(Vue);
}
}
})
}
function option(Vue){
let v = new Vue();
return {
get(a,b){
let promise = new Promise(function(reslove,reject){
v.$http.get(a,b).then((res)=>{
reslove(res)
},(err)=>{
//处理token过期问题。
})
})
return promise;
}
}
}
module.exports=plugin;
//main.js
import ajax from './ajax.js'
Vue.use(ajax)
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
一文详细聊聊vue3的defineProps、defineEmits和defineExpose
vue3官方文档defineProps和defineEmits都是只能在scriptsetup中使用的编译器宏,下面这篇文章主要给大家介绍了关于vue3的defineProps、defineEmits和defineExpose的相关资料,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了详解vue-router和vue-cli以及组件之间的传值,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
本篇文章主要介绍了用vuex写了一个购物车H5页面的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-12-12
这篇文章主要介绍了使用vue控制元素显示隐藏方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要给大家介绍了关于vue中跳转界面的3种实现方法,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了vue中render函数的使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章主要介绍了详解如何提高 webpack 构建 Vue 项目的速度，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
小编这次要给大家分享的是如何实现vue2.x数组劫持，文章内容丰富，感兴趣的小伙伴可以来了解一下，希望大家阅读完这篇文章之后能够有所收获2023-01-01
这篇文章主要介绍了Vue实现点击箭头上下移动效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-06-06
关于Element-ui中Table表格无法显示的问题及解决
这篇文章主要介绍了关于Element-ui中Table表格无法显示的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
最新评论