vue拦截器Vue.http.interceptors.push使用详解


Posted in Javascript onApril 22, 2017

刚开始学vue,github上down了一个开源项目,看源代码的时候看到了这个地方:

vue拦截器Vue.http.interceptors.push使用详解

/**
 * @export
 * @param {any} request
 * @param {any} next
 * @returns
 */
import store from './vuex/store'
// 全局错误处理,全局loading
import { setLoading, setTip } from './vuex/actions/doc_actions'
export default function (request, next) {
 if (request.tip !== false) {
 setLoading(store, true)
 }
 next((res) => {
 setLoading(store, false)
 let data = JSON.parse(res.data)
 if (res.status === 0) {
  setTip(store, {
  text: '网络不给力,请稍后再试'
  })
 }
 if (!data.success) {
  setTip(store, {
  text: data.error_msg
  })
 }
 })
}

这是一个全局的拦截器。于是搜索vue拦截器的用法,下面这一篇写的不错:

在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;

 });

});

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

Javascript 相关文章推荐
基于jQuery的遍历同id元素 并响应事件的代码
Jun 14 Javascript
javascript 操作符(~、&、|、^、)使用案例
Dec 31 Javascript
Javascript中获取对象的原型对象的方法小结
Feb 25 Javascript
浅析AngularJS中的生命周期和延迟处理
Jun 18 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
Jun 01 Javascript
浅谈Javascript中的Label语句
Dec 14 Javascript
vue2实现可复用的轮播图carousel组件详解
Nov 27 Javascript
vue2使用keep-alive缓存多层列表页的方法
Sep 21 Javascript
angularjs请求数据的方法示例
Aug 06 Javascript
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
Apr 24 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
Apr 22 #Javascript
Vue.use源码分析
Apr 22 #Javascript
uploader秒传图片到服务器完整代码
Apr 22 #Javascript
Node.js中看JavaScript的引用
Apr 22 #Javascript
详解Angular中的自定义服务Service、Provider以及Factory
Apr 22 #Javascript
Ionic2调用本地SQlite实例
Apr 22 #Javascript
ionic+AngularJs实现获取验证码倒计时按钮
Apr 22 #Javascript
You might like
PHP字符串处理的10个简单方法
2010/06/30 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
用Jquery实现多级下拉框无刷新的联动
2010/12/22 Javascript
jquery遍历select元素(实例讲解)
2013/12/31 Javascript
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
javascript父子页面通讯实例详解
2015/07/17 Javascript
对象转换为原始值的实现方法
2016/06/06 Javascript
html+js实现简单的计算器代码(加减乘除)
2016/07/12 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
JS实现简单表格排序操作示例
2017/10/07 Javascript
javascript+jQuery实现360开机时间显示效果
2017/11/03 jQuery
详解Nodejs mongoose
2018/06/10 NodeJs
vue-cli脚手架搭建的项目去除eslint验证的方法
2018/09/29 Javascript
JavaScript中的this基本问题实例小结
2020/03/09 Javascript
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
React 条件渲染最佳实践小结(7种)
2020/09/27 Javascript
[01:01:04]2018DOTA2亚洲邀请赛 4.5 淘汰赛 OpTic vs TNC 第一场
2018/04/06 DOTA
[06:53]2018DOTA2国际邀请赛寻真——勇于创新的Vici Gaming
2018/08/14 DOTA
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2018/11/30 Python
python3编写ThinkPHP命令执行Getshell的方法
2019/02/26 Python
python通过nmap扫描在线设备并尝试AAA登录(实例代码)
2019/12/30 Python
pytorch 自定义卷积核进行卷积操作方式
2019/12/30 Python
对python中各个response的使用说明
2020/03/28 Python
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
Hotter Shoes美国官网:英国最受欢迎的舒适鞋
2018/08/02 全球购物
师范院校学生自荐信范文
2013/12/27 职场文书
目标责任书范本
2014/04/16 职场文书
艾滋病宣传标语
2014/06/25 职场文书
车间核算员岗位职责
2014/07/01 职场文书
本科应届生求职信
2014/08/05 职场文书
开展党的群众路线教育实践活动情况汇报
2014/11/05 职场文书
环保建议书作文400字
2015/09/14 职场文书
聘任书的格式及模板
2019/10/28 职场文书