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 相关文章推荐
深入了解Vue3模板编译原理
Nov 19 Vue.js
Vue中computed和watch有哪些区别
Dec 19 Vue.js
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
Vue实现简单计算器
Jan 20 Vue.js
vue keep-alive的简单总结
Jan 25 Vue.js
Vue 数据响应式相关总结
Jan 28 Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
Vue实现todo应用的示例
Feb 20 Vue.js
关于Vue中的options选项
Mar 22 Vue.js
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
vue代码分块和懒加载非必要资源文件
Apr 11 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
javascript 小型动画组件与实现代码
2010/06/02 PHP
php统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
PHP 读取大文件并显示的简单实例(推荐)
2016/08/12 PHP
JavaScript Date对象 日期获取函数
2010/12/19 Javascript
JS链式调用的实现方法
2013/03/07 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
2013/09/21 Javascript
jQuery无刷新切换主题皮肤实例讲解
2015/10/21 Javascript
跟我学习javascript的严格模式
2015/11/16 Javascript
不得不分享的JavaScript常用方法函数集(上)
2015/12/23 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
2016/01/26 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
AngularJS基础 ng-mouseleave 指令详解
2016/08/02 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
2016/08/09 Javascript
基于vue cli 通过命令行传参实现多环境配置
2018/07/12 Javascript
浅谈HTTP 缓存的那些事儿
2018/10/17 Javascript
详解如何用webpack4从零开始构建react开发环境
2019/01/27 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
Javascript执行流程细节原理解析
2020/05/14 Javascript
[01:06:54]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第二场 2月28日
2021/03/11 DOTA
python 实现删除文件或文件夹实例详解
2016/12/04 Python
python中requests使用代理proxies方法介绍
2017/10/25 Python
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
python爬虫爬取某网站视频的示例代码
2021/02/20 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
eDreams加拿大:廉价航班、酒店和度假
2019/03/29 全球购物
医学院毕业生自荐信
2013/11/08 职场文书
给排水工程师岗位职责
2013/11/21 职场文书
中专毕业生的自我鉴定
2013/12/01 职场文书
应用心理学个人求职信范文
2013/12/11 职场文书
中英文自我评价常用句型
2013/12/19 职场文书
《桃林那间小木屋》教学反思
2014/05/01 职场文书
乡镇安全生产目标责任书
2014/07/23 职场文书
机关作风整顿个人整改措施思想汇报
2014/09/29 职场文书
雄兵连:第三季先行图公开,天使恶魔联合,银河之力的新力量
2021/06/11 国漫
面试被问select......for update会锁表还是锁行
2021/11/11 MySQL