vue-resource 拦截器(interceptor)的使用详解


Posted in Javascript onJuly 04, 2017

拦截器-interceptor

在现代的一些前端框架上,拦截器基本上是很基础但很重要的一环,比如Angular原生就支持拦截器配置,VUE的Axios模块也给我们提供了拦截器配置,那么拦截器到底是什么,它有什么用?

拦截器能帮助我们解决的

1、添加统一的request的参数

比如header中加入X-Requested-With,比如客户端需要实现sign和token的验证机制,比如你可以写$http.get('/files', params),拦截器帮你拼接成 http://www.xxxx.com/1/files 这样的请求地址

2、处理统一的responseError

比如重连机制,拿到error.code错误码重连,比如token过期,重新拿到token再次send request

比如统一报错信息,给所有返回的404来个提示也会很酷

angular interceptor

angular的interceptor是个数组,在 $httpProvider 中进行配置,一般写成一个config, 然后$httpProvider注入进来就可以配置了,把我们写的 interceptor push进去就OK了, $httpProvider.interceptors.push('interceptor') ,interceptor一般写成一个服务

var interceptor = {
 'request': function (config) {
 return config
 },
 'requestError': function (rejection) {
 
 },
 'response': function (response) {
 return response
 },
 'responseError': function (rejection) {

 }
}

return支持返回一个promise,可以对config中的params,data, url, headers等进行加工,符合我们的请求再return出去,所有的$http请求都会被拦截到

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.http.interceptors.push((request, next) =>{ 
 //登录成功后将后台返回的TOKEN在本地存下来,每次请求从sessionStorage中拿到存储的TOKEN值 
 let TOKEN=sessionStorage.getItem('STORAGE_TOKEN'); 
 if(TOKEN){ 
  //如果请求时TOKEN存在,就为每次请求的headers中设置好TOKEN,后台根据headers中的TOKEN判断是否放行 
  request.headers.set('TOKEN',TOKEN); 
 } 
 next((response) => { 
  return response; 
 }); 
}); 
/******************拦截器设置请参考这部分(结束)******************/
//拦截器 
        Vue.http.interceptors.push((request, next) => { 
//         console.log(Login.item); 
          var tokens = localStorage.getItem('token'); 
          request.headers.set('Authorization', tokens); 
//         console.log(request.headers); 
          help.showLoading = true; 
           
          next((response) => { 
//           console.log(response); 
            help.showLoading = false; 
            return response 
          }) 
        })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript使用cookie
Feb 02 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
Aug 15 Javascript
Jquery 表格合并的问题分享
Sep 17 Javascript
node.js中的fs.existsSync方法使用说明
Dec 17 Javascript
jQuery中:header选择器用法实例
Dec 29 Javascript
微信小程序 122100版本更新问题解决方案
Dec 22 Javascript
利用jquery禁止外层滚动条的滚动
Jan 05 Javascript
微信小程序 在线支付功能的实现
Mar 14 Javascript
vue绑定设置属性的多种方式(5)
Aug 16 Javascript
JS实现点击拉拽轮播图pc端移动端适配
Sep 05 Javascript
js中关于Blob对象的介绍与使用
Nov 29 Javascript
JS函数参数的传递与同名参数实例分析
Mar 16 Javascript
JavaScript在控件上添加倒计时功能的实现代码
Jul 04 #Javascript
JavaScript异步上传图片文件的实例代码
Jul 04 #Javascript
详解vue-router和vue-cli以及组件之间的传值
Jul 04 #Javascript
详解Angular.js中$http拦截器的介绍及使用
Jul 04 #Javascript
详解vue-cli 脚手架项目-package.json
Jul 04 #Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
Jul 04 #Javascript
详解node如何让一个端口同时支持https与http
Jul 04 #Javascript
You might like
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
将二维数组转为一维数组的2种方法
2014/05/26 PHP
Yii2使用小技巧之通过 Composer 添加 FontAwesome 字体资源
2014/06/22 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
Js,alert出现乱码问题的解决方法
2013/06/19 Javascript
浅析Cookie中的Path与domain
2013/12/18 Javascript
JS应用正则表达式转换大小写示例
2014/09/18 Javascript
JavaScript实现twitter puddles算法实例
2014/12/06 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
2015/04/17 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
JS给Array添加是否包含字符串的简单方法
2016/10/29 Javascript
js 模仿锚点定位的实现方法
2016/11/19 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
2019/09/21 Javascript
vuex(vue状态管理)的特殊应用案例分享
2020/03/03 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
2020/04/03 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
2020/05/06 Javascript
python批量提交沙箱问题实例
2014/10/08 Python
Python3.6实现连接mysql或mariadb的方法分析
2018/05/18 Python
Python实现将通信达.day文件读取为DataFrame
2018/12/22 Python
新年快乐! python实现绚烂的烟花绽放效果
2019/01/30 Python
TensorFlow车牌识别完整版代码(含车牌数据集)
2019/08/05 Python
Python中pymysql 模块的使用详解
2019/08/12 Python
python数据处理之如何选取csv文件中某几行的数据
2019/09/02 Python
JAVA SWT事件四种写法实例解析
2020/06/05 Python
香港最大的洋酒零售连锁店:屈臣氏酒窖(Watson’s Wine)
2018/12/10 全球购物
丽笙酒店官方网站:Radisson Hotels
2019/05/07 全球购物
自我评价中英文语句
2013/11/30 职场文书
千元咖啡店的创业计划书范文
2013/12/29 职场文书
大学生的网上创业计划书
2013/12/31 职场文书
美发店5.1活动方案
2014/01/24 职场文书
《日月潭》教学反思
2014/02/28 职场文书
领导工作表现评语
2015/01/04 职场文书
放假通知范文
2015/04/14 职场文书