分享Angular http interceptors 拦截器使用(推荐)


Posted in Javascript onNovember 10, 2019

AngularJS 简介

AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。

AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。

拦截器

在开始创建拦截器之前,一定要了解 $q和延期承诺api

出于全局错误处理,身份验证或请求的任何同步或异步预处理或响应的后处理目的,希望能够在将请求移交给服务器之前拦截请求,并在将请求移交给服务器之前将响应拦截发起这些请求的应用程序代码-拦截器利用promise api满足同步和异步预处理的需求。

拦截器是$httpProvider通过将它们添加到$httpProvider.interceptors数组而向其注册的服务工厂。调用工厂并注入依赖项(如果指定),并返回拦截器。

有两种拦截器(和两种拒绝拦截器):

  • request:拦截器通过http config对象调用。该函数可以自由修改config对象或创建新对象。函数需要config直接返回对象,或者包含config或新config对象的Promise。
  • requestError:当先前的拦截器抛出错误或被拒绝解决时,拦截器将被调用。
  • response:拦截器通过http response对象调用。该函数可以自由修改response对象或创建新对象。函数需要response直接返回对象,或者作为包含response或新response对象的承诺。
  • responseError:当先前的拦截器抛出错误或被拒绝解决时,拦截器将被调用。
// register the interceptor as a service
$provide.factory('myHttpInterceptor', function($q, dependency1, dependency2) {
 return {
  // optional method
  'request': function(config) {
   // do something on success
   return config;
  },
  // optional method
  'requestError': function(rejection) {
   // do something on error
   if (canRecover(rejection)) {
    return responseOrNewPromise
   }
   return $q.reject(rejection);
  },
  // optional method
  'response': function(response) {
   // do something on success
   return response;
  },
  // optional method
  'responseError': function(rejection) {
   // do something on error
   if (canRecover(rejection)) {
    return responseOrNewPromise
   }
   return $q.reject(rejection);
  }
 };
});
$httpProvider.interceptors.push('myHttpInterceptor');
// alternatively, register the interceptor via an anonymous factory
$httpProvider.interceptors.push(function($q, dependency1, dependency2) {
 return {
  'request': function(config) {
    // same as above
  },
  'response': function(response) {
    // same as above
  }
 };
});

此处有一个坑,在push时,提示未定义拦截器,因为$httpProvider在config 拦截器时,拦截器service 还不能找到,

可以将拦截器service 定义在config依赖的模块中使用。

以上内容是小编给大家分享Angular http interceptors 拦截器使用,希望对大家有所帮助!

Javascript 相关文章推荐
window.event快达到全浏览器支持了,以后使用就方便了
Nov 30 Javascript
关于js new Date() 出现NaN 的分析
Oct 23 Javascript
将json当数据库一样操作的javascript lib
Oct 28 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
Sep 11 Javascript
javascript设计模式Constructor(构造器)模式
Aug 19 Javascript
Bootstrap基本样式学习笔记之图片(6)
Dec 07 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 Javascript
微信小程序 数据交互与渲染实例详解
Jan 21 Javascript
JS字符串false转boolean的方法(推荐)
Mar 08 Javascript
Angular8 实现table表格表头固定效果
Jan 03 Javascript
JavaScript canvas动画实现时钟效果
Feb 10 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 Javascript
vue-父子组件和ref实例详解
Nov 10 #Javascript
vue $set 给数据赋值的实例
Nov 09 #Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
Nov 09 #Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
Nov 09 #Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
Nov 09 #Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
Nov 09 #Javascript
Vue实现点击按钮复制文本内容的例子
Nov 09 #Javascript
You might like
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
PHP伪造referer实例代码
2008/09/20 PHP
php下批量挂马和批量清马代码
2011/02/27 PHP
php中cookie实现二级域名可访问操作的方法
2014/11/11 PHP
PHP对象链式操作实现原理分析
2016/10/09 PHP
QQ登录简单实现代码
2021/03/09 Javascript
JS 显示当前日期与时间的代码
2010/03/24 Javascript
Javascript JSQL,SQL无处不在,
2010/05/05 Javascript
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
利用JQuery写一个简单的异步分页插件
2016/03/07 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
2016/06/07 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
2016/06/12 Javascript
JS实现微信摇一摇原理解析
2017/07/22 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
2018/08/24 Javascript
详解webpack4.x之搭建前端开发环境
2019/03/28 Javascript
javascript面向对象三大特征之继承实例详解
2019/07/24 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
JavaScript实现省份城市的三级联动
2020/02/11 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
2020/07/31 Javascript
vue等两个接口都返回结果再执行下一步的实例
2020/09/08 Javascript
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
[43:51]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS Secret
2018/03/31 DOTA
Python素数检测实例分析
2015/06/15 Python
Python ValueError: invalid literal for int() with base 10 实用解决方法
2015/06/21 Python
Python使用tablib生成excel文件的简单实现方法
2016/03/16 Python
python文件操作之批量修改文件后缀名的方法
2018/08/10 Python
Python实现的爬取小说爬虫功能示例
2019/03/30 Python
详解Python下载图片并保存本地的两种方式
2019/05/15 Python
python交互模式下输入换行/输入多行命令的方法
2019/07/02 Python
CSS3属性box-shadow使用详细教程
2012/01/21 HTML / CSS
澳洲小众品牌的集合网站:BNKR
2018/02/23 全球购物
医大实习自我鉴定
2013/12/07 职场文书
标准的毕业生自荐信
2014/04/20 职场文书
2014年乡镇民政工作总结
2014/12/02 职场文书
狂人日记读书笔记
2015/06/30 职场文书
Java设计模式中的命令模式
2022/04/28 Java/Android