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获取当前屏幕的高度宽度的实现代码
Jul 12 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
Feb 16 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
Feb 25 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
Jun 23 Javascript
js中最容易被忽视的事件问题大总结
May 15 Javascript
jQuery Easyui快速入门教程
Aug 21 Javascript
jQuery排序插件tableSorter使用方法
Feb 10 Javascript
JavaScript实现form表单的多文件上传
Mar 27 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
Jun 29 Javascript
JavaScript实现图片无缝滚动效果
Jul 07 Javascript
JS数组操作中的经典算法实例讲解
Jul 26 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
Nov 15 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
自制汽车收音机天线:收听广播的技巧和方法
2021/03/02 无线电
php加密解密字符串示例
2016/10/13 PHP
thinkphp实现附件上传功能
2017/05/26 PHP
Laravel路由研究之domain解决多域名问题的方法示例
2019/04/04 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
javascript+dom树型菜单类,希望朋友们一起进步
2007/05/03 Javascript
javascript web页面刷新的方法收集
2009/07/02 Javascript
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
2010/04/01 Javascript
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
ExtJs使用总结(非常详细)
2012/03/22 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
2014/02/11 Javascript
JavaScript中的变量定义与储存介绍
2014/12/31 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
vue高德地图之玩转周边
2017/06/16 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
小程序页面动态配置实现方法
2019/02/05 Javascript
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
vue cli 3.x 项目部署到 github pages的方法
2019/04/17 Javascript
微信小程序点击view动态添加样式过程解析
2020/01/21 Javascript
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
[01:11:28]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第一场 1月8日
2021/03/11 DOTA
[52:02]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第二场 2月26日
2021/03/11 DOTA
详解python如何调用C/C++底层库与互相传值
2016/08/10 Python
Python使用functools实现注解同步方法
2018/02/06 Python
python3实现表白神器
2019/04/09 Python
利用css3实现的简单的鼠标悬停按钮
2014/11/04 HTML / CSS
美国知名日用品连锁超市:Dollar General(多来店)
2017/01/14 全球购物
美国糖果店:Sugarfina
2019/02/21 全球购物
开办化妆品公司创业计划书
2013/12/26 职场文书
护士感人事迹
2014/05/01 职场文书
幸福家庭事迹材料
2014/12/20 职场文书
晚会开幕词
2015/01/28 职场文书
2015年关爱留守儿童工作总结
2015/05/22 职场文书
房产电话营销开场白
2015/05/29 职场文书
联欢会开场白
2015/06/01 职场文书
趣味运动会通讯稿
2015/07/18 职场文书