vue-resource 拦截器使用详解


Posted in Javascript onFebruary 21, 2017

在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绑定一个this.$$http.get方法取代this.$http.get方法,每个页面的http请求添加个$在$http前即可。

// ajax.js
function plugin(Vue){
  Object.defineProperties(Vue.prototype,{
    $$http:{
      get(){
        return option(Vue);
      }
    }
  })
}
function option(Vue){
  let v = new Vue();
  return {
    get(a,b){
      let promise = new Promise(function(reslove,reject){
        v.$http.get(a,b).then((res)=>{
          reslove(res)
        },(err)=>{





//处理token过期问题。
        })
      })
      return promise;
    }
  }
}
module.exports=plugin;


//main.js

import ajax from './ajax.js'
Vue.use(ajax)

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

Javascript 相关文章推荐
类似天猫商品详情随浏览器移动的示例代码
Feb 27 Javascript
JavaScript排序算法之希尔排序的2个实例
Apr 04 Javascript
JavaScript中的parse()方法使用简介
Jun 12 Javascript
js canvas实现擦除动画
Jul 16 Javascript
基于JavaScript实现自动更新倒计时效果
Dec 19 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
Sep 04 Javascript
详解关于react-redux中的connect用法介绍及原理解析
Sep 11 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
Feb 22 Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 Javascript
vue form check 表单验证的实现代码
Dec 09 Javascript
深入理解js A*寻路算法原理与具体实现过程
Dec 13 Javascript
Vue引入Stylus知识点总结
Jan 16 Javascript
微信小程序 template模板详解及实例
Feb 21 #Javascript
Bootstrap 3 按钮标签实例代码
Feb 21 #Javascript
Angular实现购物车计算示例代码
Feb 21 #Javascript
原生js实现倒计时--2018
Feb 21 #Javascript
vue-router:嵌套路由的使用方法
Feb 21 #Javascript
JavaScript中创建对象的7种模式详解
Feb 21 #Javascript
vue-router路由简单案例介绍
Feb 21 #Javascript
You might like
PHP4引用文件语句的对比
2006/10/09 PHP
PHP获取当前页面URL函数实例
2014/10/22 PHP
php.ini中的request_order推荐设置
2015/05/10 PHP
Thinkphp实现自动验证和自动完成
2015/12/19 PHP
PHP错误机制知识汇总
2016/03/24 PHP
Aster vs Newbee BO3 第二场2.18
2021/03/10 DOTA
过虑特殊字符输入的js代码
2010/08/05 Javascript
javascript 实现map集合
2015/04/03 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
利用BootStrap弹出二级对话框的简单实现方法
2016/09/21 Javascript
浅谈JavaScript的计时器对象
2016/12/26 Javascript
详解JavaScript树结构
2017/01/09 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
layer弹出层倒计时关闭的实现方法
2019/09/27 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
js实现3D旋转效果
2020/08/18 Javascript
[02:18]DOTA2英雄基础教程 育母蜘蛛
2014/01/20 DOTA
Python生成随机数的方法
2014/01/14 Python
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
彻底理解Python list切片原理
2017/10/27 Python
Python遍历pandas数据方法总结
2018/02/09 Python
详解Python odoo中嵌入html简单的分页功能
2019/05/29 Python
50行Python代码获取高考志愿信息的实现方法
2019/07/23 Python
TensorBoard 计算图的可视化实现
2020/02/15 Python
使用Keras预训练好的模型进行目标类别预测详解
2020/06/27 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
详解Anaconda安装tensorflow报错问题解决方法
2020/11/01 Python
英国的一家创新礼品和小工具零售商:Menkind
2019/08/24 全球购物
五一口号
2014/06/19 职场文书
爱护公共设施演讲稿
2014/09/13 职场文书
单位工作证明范文
2014/09/14 职场文书
群众路线班子对照检查材料
2014/09/25 职场文书
办公室主任个人对照检查材料思想汇报
2014/10/11 职场文书
先进基层党组织事迹材料2016
2016/02/29 职场文书
《黑岩★★射手 DAWN FALL》BD发售宣传CM公开
2022/04/04 日漫
SQL Server使用T-SQL语句批处理
2022/05/20 SQL Server