vue-resource 拦截器interceptors使用详解


Posted in Vue.js onJanuary 18, 2021

前言

拦截器-interceptor

在现代的一些前端框架上,拦截器基本上是很基础但很重要的一环,比如Angular原生就支持拦截器配置,VUE的Axios模块也给我们提供了拦截器配置,那么拦截器到底是什么,它有什么用?

拦截器能帮助我们解决的

  • 添加统一的request的参数
  • 比如header中加入X-Requested-With,比如客户端需要实现sign和token的验证机制,比如你可以写$http.get(‘/files', params),拦截器帮你拼接成 http://www.xxxx.com/1/files 这样的请求地址
  • 处理统一的responseError
  • 比如重连机制,拿到error.code错误码重连,比如token过期,重新拿到token再次send request
  • 比如统一报错信息,给所有返回的404来个提示也会很酷

在vue项目使用vue-resource实现异步加载的过程中,需要在任何一个页面任何一次http请求过程中,增加对token过期的判断,如果token已过期,需要跳转至登录页面。如果要在每个页面中的http请求操作中添加一次判断,那将会是一个非常大的修改工作量。那么vue-resource是否存在一个对于任何一次请求响应捕获的的公共回调函数呢?答案是有的!

vue-resource的interceptors拦截器的作用正是解决此需求的妙方。在每次http的请求响应之后,如果设置了拦截器,会优先执行拦截器函数,获取响应体,然后才会决定是否把response返回给then进行接收。那么我们可以在这个拦截器里边添加对响应状态码的判断,来决定是跳转到登录页面还是留在当前页面继续获取数据。

vue-resource 拦截器interceptors使用详解

安装与引用

NPM: npm install vue-resource --save-dev

/*引入Vue框架*/
import Vue from 'vue'
/*引入资源请求插件*/
import VueResource from 'vue-resource'

/*使用VueResource插件*/
Vue.use(VueResource)

下边代码添加在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;

 });
});

拦截器实例

(1)为请求添加loading效果

通过inteceptor,我们可以为所有的请求处理加一个loading:请求发送前显示loading,接收响应后隐藏loading。
具体步骤如下:

//1、添加一个loading组件
<template id='loading-template'>
  <div class='loading-overlay'></div>
</template>

//2、将loading组件作为另外一个Vue实例的子组件
var help = new Vue({
  el: '#help',
  data: {
    showLoading: false
  },
  components: {
    'loading': {
      template: '#loading-template',
    }
  }
})

//3、将该Vue实例挂载到某个HTML元素
<div id='help'>
  <loading v-show='showLoading'></loading>
</div>

//4、添加inteceptor
Vue.http.interceptors.push((request, next) => {
  loading.show = true;
  next((response) => {
    loading.show = false;
    return response;
  });
});

但是,当用户在画面上停留时间太久时,视图数据可能已经不是最新的了,这时如果用户删除或修改某一条数据,如果这条数据已经被其他用户删除了,服务器会反馈一个404的错误,但由于我们的put和delete请求没有处理errorCallback,所以用户是不知道他的操作是成功还是失败了。这个问题,同样也可以通过inteceptor解决。

(2)为请求添加共同的错误处理方法

//1、继续沿用上面的loading组件,在#help元素下加一个对话框
<div id='help'>
  <loading v-show='showLoading' ></loading>
  <modal-dialog :show='showDialog'>
    <header class='dialog-header' slot='header'>
      <h3 class='dialog-title'>Server Error</h3>
    </header>
    <div class='dialog-body' slot='body'>
      <p class='error'>Oops,server has got some errors, error code: {{errorCode}}.</p>
    </div>
  </modal-dialog>
</div>

//2、给help实例的data选项添加两个属性
var help = new Vue({
    el: '#help',
    data: {
      showLoading: false,
      showDialog: false,
      errorCode: ''
    },
    components: {
      'loading': {
        template: '#loading-template',
      }
    }
  })

//3、修改inteceptor
Vue.http.interceptors.push((request, next) => {
  help.showLoading = true;
  next((response) => {
    if(!response.ok){
      help.errorCode = response.status;
      help.showDialog = true;
    }
    help.showLoading = false;
    return response;
  });
});

到此这篇关于vue-resource 拦截器interceptors使用详解的文章就介绍到这了,更多相关vue-resource拦截器内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
梳理一下vue中的生命周期
Dec 30 Vue.js
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
Vue中引入svg图标的两种方式
Jan 14 Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
vue-video-player 断点续播的实现
Feb 01 Vue.js
Vue如何实现变量表达式选择器
Feb 18 Vue.js
VUE实现吸底按钮
Mar 04 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
vue实现倒计时功能
Mar 24 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
Vue全局事件总线你了解吗
Feb 24 Vue.js
vue element el-transfer增加拖拽功能
Jan 15 #Vue.js
Vue实现多页签组件
Jan 14 #Vue.js
如何在vue中使用HTML 5 拖放API
Jan 14 #Vue.js
Vue中引入svg图标的两种方式
Jan 14 #Vue.js
vue+element table表格实现动态列筛选的示例代码
Jan 14 #Vue.js
vue 递归组件的简单使用示例
Jan 14 #Vue.js
vue element和nuxt的使用技巧分享
Jan 14 #Vue.js
You might like
PHP从零开始打造自己的MVC框架之路由类实现方法分析
2019/06/03 PHP
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
利用js(jquery)操作Cookie的方法说明
2013/12/19 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
2013/12/26 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
2015/01/02 Javascript
详解JavaScript中循环控制语句的用法
2015/06/03 Javascript
c#程序员对TypeScript的认识过程
2015/06/19 Javascript
js实现页面跳转的几种方法小结
2016/05/16 Javascript
浅谈Javascript中的Label语句
2016/12/14 Javascript
flag和jq on 的绑定多个对象和方法(必看)
2017/02/27 Javascript
vue教程之toast弹框全局调用示例详解
2020/08/24 Javascript
JS去掉字符串中所有的逗号
2017/10/18 Javascript
详解webpack模块化管理和打包工具
2018/04/21 Javascript
20个最常见的jQuery面试问题及答案
2018/05/23 jQuery
微信小程序入门之广告条实现方法示例
2018/12/05 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
2019/01/22 Javascript
vue中使用v-model完成组件间的通信
2019/08/22 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
2019/09/27 Javascript
CountUp.js数字滚动插件使用方法详解
2019/10/17 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
vue 获取到数据但却渲染不到页面上的解决方法
2020/11/19 Vue.js
在Python中使用列表生成式的教程
2015/04/27 Python
深入理解Python3中的http.client模块
2017/03/29 Python
Python+selenium实现自动循环扔QQ邮箱漂流瓶
2018/05/29 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
使用python将excel数据导入数据库过程详解
2019/08/27 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
澳大利亚珠宝商:Shiels
2019/10/06 全球购物
第一范式(1NF)、第二范式(2NF)和第三范式(3NF)之间的区别是什么?
2016/04/28 面试题
应征英语教师求职信
2013/11/27 职场文书
食品质量与安全专业毕业生求职信
2014/08/11 职场文书
基层干部个人对照检查及整改措施
2014/10/28 职场文书
承诺函格式模板
2015/01/21 职场文书
母亲节感言
2015/08/03 职场文书
python区块链持久化和命令行接口实现简版
2022/05/25 Python