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

时间:2020-05-17 erming 人气:1

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

加载全部内容