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 相关文章推荐
javascript 动态加载 css 方法总结
Jul 11 Javascript
用javascript作一个通用向导说明
Aug 30 Javascript
php图像生成函数之间的区别分析
Dec 06 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
Jan 08 Javascript
图片上传判断及预览脚本的效果实例
Aug 07 Javascript
用js判断是否为360浏览器的实现代码
Jan 15 Javascript
jquery插件unobtrusive实现片段式加载
Jun 15 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
Jun 29 Javascript
JavaScript DOM节点操作方法总结
Aug 23 Javascript
Vue.js教程之计算属性
Nov 11 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
Aug 25 Javascript
JavaScript设计模式之命令模式实例分析
Jan 16 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
DC最新动画电影:《战争之子》为何内容偏激,毁了一个不错的漫画
2020/04/09 欧美动漫
用php写的serv-u的web申请账号的程序
2006/10/09 PHP
PHP中调用ASP.NET的WebService的代码
2011/04/22 PHP
php使用sql server验证连接数据库的方法
2014/12/25 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
PHP中检索字符串的方法分析【strstr与substr_count方法】
2017/02/17 PHP
newxtree.js代码
2007/03/13 Javascript
表单(FORM)的一些实用效果代码
2007/03/25 Javascript
基于jquery的获取mouse坐标插件的实现代码
2010/04/01 Javascript
Iframe 自动适应页面的高度示例代码
2014/02/26 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
2016/05/24 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
2016/09/01 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
2016/10/14 Javascript
利用jquery实现实时更新歌词的方法
2017/01/06 Javascript
如何去除vue项目中的#及其ie9兼容性
2018/01/11 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
JavaScript实现轮播图效果代码实例
2019/09/28 Javascript
vue实现几秒后跳转新页面代码
2020/09/09 Javascript
python  创建一个保留重复值的列表的补码
2018/10/15 Python
Face++ API实现手势识别系统设计
2018/11/21 Python
python3爬虫获取html内容及各属性值的方法
2018/12/17 Python
linux环境下Django的安装配置详解
2019/07/22 Python
Python配置文件处理的方法教程
2019/08/29 Python
分享8点超级有用的Python编程建议(推荐)
2019/10/13 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
CSS3按钮鼠标悬浮实现光圈效果源码
2016/09/11 HTML / CSS
HTML5是否真的可以取代Flash
2010/02/10 HTML / CSS
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
说一下mysql, oracle等常见数据库的分页实现方案
2012/09/29 面试题
介绍一下JNDI的基本概念
2013/07/26 面试题
平面设计岗位职责
2013/12/14 职场文书
应聘英语教师求职信
2014/04/24 职场文书
神龙架导游词
2015/02/11 职场文书