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 相关文章推荐
js的event详解。
Sep 06 Javascript
我见过最全的个人js加解密功能页面
Dec 12 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
Jan 23 Javascript
JavaScript数据结构与算法之集合(Set)
Jan 29 Javascript
jQuery 判断是否包含在数组中Array[]的方法
Aug 03 Javascript
Javascript中浏览器窗口的基本操作总结
Aug 18 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
Dec 08 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 Javascript
详解javascript立即执行函数表达式IIFE
Feb 13 Javascript
强大的 Angular 表单验证功能详细介绍
May 23 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 Javascript
Vue.js中的extend绑定节点并显示的方法
Jun 20 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
eAccelerator的安装与使用详解
2013/06/13 PHP
PHP与MongoDB简介|安全|M+PHP应用实例详解
2013/06/17 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
2013/02/26 Javascript
无缝滚动js代码通俗易懂(自写)
2013/06/19 Javascript
JS给超链接加确认对话框的方法
2015/02/24 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
关于使用axios的一些心得技巧分享
2017/07/02 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
2017/07/26 Javascript
使用classList来实现两个按钮样式的切换方法
2018/01/24 Javascript
vue.js实现的经典计算器/科学计算器功能示例
2018/07/11 Javascript
vue中Axios的封装与API接口的管理详解
2018/08/09 Javascript
Bootstrap-table自定义可编辑每页显示记录数
2018/09/07 Javascript
jQuery事件委托代码实践详解
2019/06/21 jQuery
JS防抖和节流实例解析
2019/09/24 Javascript
Python解析xml中dom元素的方法
2015/03/12 Python
python判断字符串是否包含子字符串的方法
2015/03/24 Python
Python 3.x 安装opencv+opencv_contrib的操作方法
2018/04/02 Python
Django中使用Celery的方法示例
2018/11/29 Python
python实现中文文本分句的例子
2019/07/15 Python
python用类实现文章敏感词的过滤方法示例
2019/10/27 Python
Python连接Oracle之环境配置、实例代码及报错解决方法详解
2020/02/11 Python
Python matplotlib实时画图案例
2020/04/23 Python
python matplotlib库的基本使用
2020/09/23 Python
Alpine安装Python3依赖出现的问题及解决方法
2020/12/25 Python
美国轮胎网站:Priority Tire
2018/11/28 全球购物
澳大利亚最大的百货公司:Myer
2018/12/21 全球购物
美国一家著名的手表在线折扣网站:Discount Watch Store
2020/02/24 全球购物
英国专业美容产品在线:Mylee(从指甲到脱毛)
2020/07/06 全球购物
大学生个人求职信例文
2014/07/07 职场文书
母亲节主题班会
2015/08/14 职场文书
《狼牙山五壮士》教学反思
2016/02/17 职场文书
详解nodejs内置模块
2021/05/06 NodeJs
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers
德劲DE1102数字调谐收音机机评
2022/04/07 无线电