分享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 相关文章推荐
javascript String 对象
Apr 25 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
Apr 07 Javascript
JS随即打乱数组实现代码
Dec 03 Javascript
JavaScript中“+”的陷阱深刻理解
Dec 04 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
May 11 Javascript
动态加载js、css的简单实现代码
May 26 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
Sep 01 Javascript
浅谈JavaScript的闭包函数
Dec 08 Javascript
基于JavaScript实现的插入排序算法分析
Apr 14 Javascript
vue2 router 动态传参,多个参数的实例
Nov 10 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
Jan 27 Javascript
Vue中点击active并第一个默认选中功能的实现
Feb 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中怎么搜索相关联数组键值及获取之
2013/10/17 PHP
ThinkPHP中的create方法与自动令牌验证实例教程
2014/08/22 PHP
PHP实现递归无限级分类
2015/10/22 PHP
php实现微信支付之退款功能
2018/05/30 PHP
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
2010/10/18 Javascript
高性能Javascript笔记 数据的存储与访问性能优化
2012/08/02 Javascript
js抽奖实现随机抽奖代码效果
2013/12/02 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
2015/05/11 Javascript
浅谈jQuery中的checkbox问题
2016/08/10 Javascript
详解webpack介绍&amp;安装&amp;常用命令
2017/06/29 Javascript
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
Vue父组件调用子组件事件方法
2018/02/23 Javascript
webpack4之如何编写loader的方法步骤
2019/06/06 Javascript
JavaScript判断数组类型的方法
2019/10/23 Javascript
javascript实现评分功能
2020/06/24 Javascript
Python装饰器使用示例及实际应用例子
2015/03/06 Python
在Python的Django框架中显示对象子集的方法
2015/07/21 Python
判断网页编码的方法python版
2016/08/12 Python
Python中操作mysql的pymysql模块详解
2016/09/13 Python
Python 中PyQt5 点击主窗口弹出另一个窗口的实现方法
2019/07/04 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
win10系统Anaconda和Pycharm的Tensorflow2.0之CPU和GPU版本安装教程
2019/12/03 Python
pymysql模块的操作实例
2019/12/17 Python
Python3读写Excel文件(使用xlrd,xlsxwriter,openpyxl3种方式读写实例与优劣)
2020/02/13 Python
Python json模块与jsonpath模块区别详解
2020/03/05 Python
keras的三种模型实现与区别说明
2020/07/03 Python
Python 忽略文件名编码的方法
2020/08/01 Python
Django与AJAX实现网页动态数据显示的示例代码
2021/02/24 Python
HTML5所有标签汇总及标签意义解释
2015/03/12 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
2018/01/10 HTML / CSS
英国玛莎百货新西兰:Marks & Spencer New Zealand
2019/07/21 全球购物
时尚孕妇装:HATCH Collection
2019/09/24 全球购物
计算机应用应届生求职信
2014/07/12 职场文书
教师个人教学反思
2016/02/23 职场文书
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS