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

相关文章

  • AngularJS基础 ng-copy 指令实例代码

    AngularJS基础 ng-copy 指令实例代码

    本文主要介绍AngularJS ng-copy 指令,这里帮大家整理了ng-copy指令的基础资料,并附有示例代码和效果图,有需要的朋友参考下
    2016-08-08
  • angularjs性能优化的方法

    angularjs性能优化的方法

    这篇文章主要介绍了angularjs性能优化的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 如何使用angularJs

    如何使用angularJs

    本篇文章主要介绍了一些AngularJs常用的一些属性和方法,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-05-05
  • Angular2 环境配置详细介绍

    Angular2 环境配置详细介绍

    这篇文章主要介绍了Angular2 环境配置的相关资料,需要的朋友可以参考下
    2016-09-09
  • 使用Angular 6创建各种动画效果的方法

    使用Angular 6创建各种动画效果的方法

    Angular能够让我们创建出具有原生表现效果的动画。我们将通过本文学习到如何使用Angular 6来创建各种动画效果。在此,我们将使用Visual Studio Code来进行示例演示。感兴趣的朋友跟随小编一起看看吧
    2018-10-10
  • Angular ng-class详解及实例代码

    Angular ng-class详解及实例代码

    这篇文章主要介绍了Angular ng-class的知识,并整理了相关资料,有兴趣的小伙伴可以参考下
    2016-09-09
  • Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法

    Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法

    今天小编就为大家分享一篇Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 深入理解Angular.JS中的Scope继承

    深入理解Angular.JS中的Scope继承

    这篇文章主要给大家深入的介绍了关于Angular.JS中Scope继承的相关资料,Angular。JS中scope之间的继承关系使用JavaScript的原型继承方式实现,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-06-06
  • Angular 4根据组件名称动态创建出组件的方法教程

    Angular 4根据组件名称动态创建出组件的方法教程

    组件是我们在学习angular中必不可少的一部分,下面这篇文章主要给大家介绍了关于Angular 4如何根据组件名称动态创建出组件的相关资料,文中通过图文与示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-11-11
  • angularJS 入门基础

    angularJS 入门基础

    这篇文章主要介绍了angularJS 入门基础的相关资料,需要的朋友可以参考下
    2015-02-02

最新评论