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

 更新时间:2019年11月10日 07:52:53   作者:erming  
AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。这篇文章主要介绍了分享Angular http interceptors 拦截器使用(推荐),需要的朋友可以参考下

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 拦截器使用,希望对大家有所帮助!

相关文章

  • Angular2搜索和重置按钮过场动画

    Angular2搜索和重置按钮过场动画

    这篇文章主要介绍了Angular2搜索和重置按钮过场动画,需要的朋友可以参考下
    2017-05-05
  • Angular的Bootstrap(引导)和Compiler(编译)机制

    Angular的Bootstrap(引导)和Compiler(编译)机制

    这篇文章主要介绍了Angular的Bootstrap(引导)和Compiler(编译)机制的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • Angular实现图片裁剪工具ngImgCrop实践

    Angular实现图片裁剪工具ngImgCrop实践

    本篇文章主要介绍了Angular实现图片裁剪工具ngImgCrop实践,具有一定的参考价值,有兴趣的可以了解一下
    2017-08-08
  • Angular value与ngValue区别详解

    Angular value与ngValue区别详解

    这篇文章主要介绍了Angular value与ngValue区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • Angular angular-file-upload文件上传的示例代码

    Angular angular-file-upload文件上传的示例代码

    这篇文章主要介绍了Angular angular-file-upload文件上传的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 在AngularJS中如何使用谷歌地图把当前位置显示出来

    在AngularJS中如何使用谷歌地图把当前位置显示出来

    这篇文章给的大家介绍在AngularJS中如何使用谷歌地图把当前位置显示出来,本文介绍的非常详细,具有参考借鉴价值,对angularjs 谷歌地图相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • 详解AngularJS 模块化

    详解AngularJS 模块化

    本篇文章主要介绍了详解AngularJS 模块化,模块用于单独的逻辑表示服务,控制器,应用程序等,并保持代码的整洁。有兴趣的可以了解一下
    2017-06-06
  • 用AngularJS的指令实现tabs切换效果

    用AngularJS的指令实现tabs切换效果

    这篇文章介绍的是写一个通过指令嵌套实现tabs功能的指令模块,这也是我在一个项目中应用到的,现在分享给大家,有需要的可以参考借鉴。
    2016-08-08
  • AngularJS 表单验证手机号的实例(非必填)

    AngularJS 表单验证手机号的实例(非必填)

    下面小编就为大家带来一篇AngularJS 表单验证手机号的实例(非必填)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • AngularJS 中括号的作用详解

    AngularJS 中括号的作用详解

    这篇文章主要介绍了AngularJS 中括号的作用,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-04-04

最新评论