分享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 相关文章推荐
CSS+Jquery实现页面圆角框方法大全
Dec 24 Javascript
jQuery入门问答 整理的几个常见的初学者问题
Feb 22 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
Feb 23 Javascript
asp.net刷新本页面的六种方法总结
Jan 07 Javascript
原生Js实现简易烟花爆炸效果的方法
Mar 20 Javascript
jQuery中extend()和fn.extend()方法详解
Jun 03 Javascript
js获取html的span标签的值方法(超简单)
Jul 26 Javascript
谈谈第三方App接入微信登录 解读
Dec 27 Javascript
JQuery实现动态操作表格
Jan 11 Javascript
Javascript面试经典套路reduce函数查重
Mar 23 Javascript
vue实现带复选框的树形菜单
May 27 Javascript
JS实现简单打字测试
Jun 24 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
巧用php中的array_filter()函数去掉多维空值的代码分享
2012/09/07 PHP
PHP中计算字符串相似度的函数代码
2012/12/29 PHP
Laravel使用memcached缓存对文章增删改查进行优化的方法
2016/10/08 PHP
PHP实现原生态图片上传封装类方法
2016/11/08 PHP
php获取手机端的号码以及ip地址实例代码
2018/09/12 PHP
在 Laravel 中动态隐藏 API 字段的方法
2019/10/25 PHP
PHP编程一定要改掉的5个不良习惯
2020/09/18 PHP
Javascript 网页水印(非图片水印)实现代码
2010/03/01 Javascript
js和jquery批量绑定事件传参数一(新猪猪原创)
2010/06/23 Javascript
一步一步制作jquery插件Tabs实现过程
2010/07/06 Javascript
js导航菜单(自写)简单大方
2013/03/28 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
2013/04/09 Javascript
javascript验证只能输入数字和一个小数点示例
2013/10/21 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
2015/06/11 Javascript
简单实现bootstrap选项卡效果
2017/02/08 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
浅谈vue项目打包优化策略
2018/09/29 Javascript
js根据json数据中的某一个属性来给数据分组的方法
2018/10/08 Javascript
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
JS eval代码快速解密实例解析
2020/04/23 Javascript
wxPython学习之主框架实例
2014/09/28 Python
Python变量作用范围实例分析
2015/07/07 Python
Flask之flask-script模块使用
2018/07/26 Python
浅析PEP570新语法: 只接受位置参数
2019/10/15 Python
基于Tensorflow高阶读写教程
2020/02/10 Python
PyTorch中的C++扩展实现
2020/04/02 Python
纯css3实现图片翻牌特效
2015/03/10 HTML / CSS
美体小铺美国官网:The Body Shop美国
2017/11/10 全球购物
Skyscanner阿联酋:全球领先的旅游搜索平台
2017/11/25 全球购物
北美个性化礼品商店:Things Remembered
2018/06/12 全球购物
《乡下孩子》教学反思
2014/04/17 职场文书
医院安全生产月活动总结
2014/07/05 职场文书
个人查摆剖析材料
2014/10/04 职场文书
销售合作意向书范本
2015/05/08 职场文书
Log4j.properties配置及其使用
2021/08/02 Java/Android
Redis keys命令的具体使用
2022/06/05 Redis