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 相关文章推荐
获取客户端网卡MAC地址和IP地址实现JS代码
Mar 17 Javascript
使用javascript创建快捷方式的简单实例
Aug 09 Javascript
javascript实现数字验证码的简单实例
Feb 10 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
Dec 29 Javascript
js运动动画的八个知识点
Mar 12 Javascript
Angularjs实现多个页面共享数据的方式
Mar 29 Javascript
微信小程序 保留小数(toFixed)详细介绍
Nov 16 Javascript
js 开发之autocomplete="off"在chrom中失效的解决办法
Sep 28 Javascript
JavaScript中Object值合并方法详解
Dec 22 Javascript
ng-repeat指令在迭代对象时的去重方法
Oct 02 Javascript
vue项目中使用vue-i18n报错的解决方法
Jan 13 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
Feb 21 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 实现类似js中alert() 提示框
2015/03/18 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
PHP如何使用array_unshift()在数组开头插入元素
2020/09/01 PHP
PHP SESSION跨页面传递失败解决方案
2020/12/11 PHP
javascript 特殊字符串
2009/02/25 Javascript
判断脚本加载是否完成的方法
2009/05/26 Javascript
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
2010/01/22 Javascript
JavaScript 高效运行代码分析
2010/03/18 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
2013/03/29 Javascript
JavaScript操纵窗口的方法小结
2013/06/28 Javascript
使用JavaScript的AngularJS库编写hello world的方法
2015/06/23 Javascript
JS组件Bootstrap实现图片轮播效果
2016/05/16 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
jQuery实现select模糊查询(反射机制)
2017/01/14 Javascript
javascript数据类型详解
2017/02/07 Javascript
socket.io学习教程之深入学习篇(三)
2017/04/29 Javascript
微信小程序promsie.all和promise顺序执行
2017/10/27 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
2018/06/28 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
turn.js异步加载实现翻书效果
2019/07/25 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
Vue Router 实现动态路由和常见问题及解决方法
2020/03/06 Javascript
Python类的多重继承问题深入分析
2014/11/09 Python
Python实现嵌套列表及字典并按某一元素去重复功能示例
2017/11/30 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
Python 随机按键模拟2小时
2020/12/30 Python
python 利用matplotlib在3D空间中绘制平面的案例
2021/02/06 Python
HTML5实现简单图片上传所遇到的问题及解决办法
2016/01/20 HTML / CSS
美国最大的城市服装和运动鞋零售商:Jimmy Jazz
2016/11/19 全球购物
遗嘱格式范本
2015/08/07 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
创业计划书之废品回收
2019/09/26 职场文书
MySql开发之自动同步表结构
2021/05/28 MySQL
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers
python神经网络学习 使用Keras进行回归运算
2022/05/04 Python