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 相关文章推荐
JS代码格式化和语法着色V2
Oct 14 Javascript
JavaScript 保存数组到Cookie的代码
Apr 14 Javascript
jQuery ajax serialize() 方法使用示例
Nov 02 Javascript
jQuery $.each遍历对象、数组用法实例
Apr 16 Javascript
jquery事件的ready()方法使用详解
Nov 11 Javascript
Knockout自定义绑定创建方法
Dec 26 Javascript
Yarn的安装与使用详细介绍
Oct 25 Javascript
什么是Vue.js框架 为什么选择它?
Oct 17 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 Javascript
js console.log打印对象时属性缺失的解决方法
May 23 Javascript
了解javascript中的Dom操作
May 27 Javascript
vue中对象数组去重的实现
Feb 06 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
PHP下10件你也许并不了解的事情
2008/09/11 PHP
PHP下对数组进行排序的函数
2010/08/08 PHP
php中http与https跨域共享session的解决方法
2014/12/20 PHP
PHP使用Pthread实现的多线程操作实例
2015/11/14 PHP
Zend Framework教程之Zend_Layout布局助手详解
2016/03/04 PHP
如何让PHP编码更加好看利于阅读
2019/05/12 PHP
克隆javascript对象的三个方法小结
2011/01/12 Javascript
js将long日期格式转换为标准日期格式实现思路
2013/04/07 Javascript
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
2014/09/28 Javascript
JavaScript改变CSS样式的方法汇总
2015/05/07 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
2015/12/09 Javascript
jquery文字填写自动高度的实现方法
2016/11/07 Javascript
Bootstrap popover用法详解
2016/12/22 Javascript
安装vue-cli报错 -4058 的解决方法
2017/10/19 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
2019/12/17 Javascript
[09:22]2014DOTA2西雅图国际邀请赛 主赛事第二日TOPPLAY
2014/07/21 DOTA
使用Python微信库itchat获得好友和群组已撤回的消息
2018/06/24 Python
Python实现语音识别和语音合成功能
2019/09/20 Python
python中uuid模块实例浅析
2020/12/29 Python
用python制作个音乐下载器
2021/01/30 Python
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
什么是ESB?请介绍一下ESB?
2015/05/27 面试题
销售辞职报告范文
2014/01/12 职场文书
抽奖活动主持词
2014/03/31 职场文书
教师读书活动总结
2014/05/07 职场文书
投标授权委托书范文
2014/08/02 职场文书
求职自荐信范文(优秀篇)
2015/03/27 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
运动员入场前导词
2015/07/20 职场文书
银行求职信范文
2019/05/13 职场文书
Python 数据可视化之Bokeh详解
2021/11/02 Python
python绘制云雨图raincloud plot
2022/08/05 Python