欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

浅析AngularJs HTTP响应拦截器

程序员文章站 2023-08-27 18:48:10
为何要用拦截器? 任何时候,如果我们想要为请求添加全局功能,例如身份认证、错误处理等,在请求发送给服务器之前或服务器返回时对其进行拦截,是比较好的实现手段。  ...

为何要用拦截器?

任何时候,如果我们想要为请求添加全局功能,例如身份认证、错误处理等,在请求发送给服务器之前或服务器返回时对其进行拦截,是比较好的实现手段。

 angularjs通过拦截器提供了一个从全局层面进行处理的途径.

 拦截器允许你:

通过实现 request 方法拦截请求: 该方法会在 $http 发送请求道后台之前执行,因此你可以修改配置或做其他的操作。该方法接收请求配置对象(request configuration object)作为参数,然后必须返回配置对象或者 promise 。如果返回无效的配置对象或者 promise 则会被拒绝,导致 $http 调用失败。

通过实现 response 方法拦截响应: 该方法会在 $http 接收到从后台过来的响应之后执行,因此你可以修改响应或做其他操作。该方法接收响应对象(response object)作为参数,然后必须返回响应对象或者 promise。响应对象包括了请求配置(request configuration),头(headers),状态(status)和从后台过来的数据(data)。如果返回无效的响应对象或者 promise 会被拒绝,导致$http 调用失败。

通过实现 requesterror 方法拦截请求异常: 有时候一个请求发送失败或者被拦截器拒绝了。请求异常拦截器会俘获那些被上一个请求拦截器中断的请求。它可以用来恢复请求或者有时可以用来撤销请求之前所做的配置,比如说关闭进度条,激活按钮和输入框什么之类的。

通过实现 responseerror 方法拦截响应异常: 有时候我们后台调用失败了。也有可能它被一个请求拦截器拒绝了,或者被上一个响应拦截器中断了。在这种情况下,响应异常拦截器可以帮助我们恢复后台调用。

 拦截器的核心是服务工厂,通过向$httpprovider.interceptors数组中添加服务工厂。在$httpprovider中进行注册。

 angularjs提供四种拦截器,其中两种成功拦截器(request、response),两种失败拦截器(requesterror、responseerror)。

  在服务中添加一种或多种拦截器:

angular.module("myapp", []) 
  .factory('httpinterceptor', [ '$q', '$injector',function($q, $injector) { 
    var httpinterceptor = { 
      'responseerror' : function(response) { 
        ...... 
        return $q.reject(response); 
      }, 
      'response' : function(response) { 
        ...... 
        return response; 
      }, 
      'request' : function(config) { 
        ...... 
        return config; 
      }, 
      'requesterror' : function(config){ 
        ...... 
        return $q.reject(config); 
      } 
    } 
  return httpinterceptor; 
} 

然后使用$httpprovider在.config()函数中注册拦截器

angular.module("myapp", []) 
.config([ '$httpprovider', function($httpprovider) { 
  $httpprovider.interceptors.push('httpinterceptor'); 
} ]); 

  实际的例子:(对401、404的拦截)

routerapp.config([ '$httpprovider', function($httpprovider) { 
    $httpprovider.interceptors.push('httpinterceptor'); 
  } ]); 
  routerapp.factory('httpinterceptor', [ '$q', '$injector',function($q, $injector) { 
    var httpinterceptor = { 
      'responseerror' : function(response) { 
        if (response.status == 401) { 
          var rootscope = $injector.get('$rootscope'); 
          var state = $injector.get('$rootscope').$state.current.name; 
          rootscope.statebeforlogin = state; 
          rootscope.$state.go("login"); 
          return $q.reject(response); 
        } else if (response.status === 404) { 
          alert("404!"); 
          return $q.reject(response); 
        } 
      }, 
      'response' : function(response) { 
        return response; 
      } 
    } 
    return httpinterceptor; 
  }  
]); 

session 注入(请求拦截器)

这里有两种方式来实现服务端的认证。第一种是传统的 cookie-based 验证。通过服务端的 cookies 来对每个请求的用户进行认证。另一种方式是 token-based 验证。当用户登录时,他会从后台拿到一个 sessiontoken。sessiontoken 在服务端标识了每个用户,并且会包含在发送到服务端的每个请求中。

下面的 sessioninjector 为每个被俘获的请求添加了 x-session-token 头 (如果当前用户已登录):

<!-- lang: js -->
module.factory('sessioninjector', ['sessionservice', function(sessionservice) {
  var sessioninjector = {
    request: function(config) {
      if (!sessionservice.isanonymus) {
        config.headers['x-session-token'] = sessionservice.token;
      }
      return config;
    }
  };
  return sessioninjector;
}]);
module.config(['$httpprovider', function($httpprovider) {
  $httpprovider.interceptors.push('sessioninjector');
}]);

然后创建一个请求:

<!-- lang: js -->
$http.get('https://api.github.com/users/naorye/repos');

被 sessioninjector 拦截之前的配置对象是这样的:

<!-- lang: js -->
{
  "transformrequest": [
    null
  ],
  "transformresponse": [
    null
  ],
  "method": "get",
  "url": "https://api.github.com/users/naorye/repos",
  "headers": {
    "accept": "application/json, text/plain, */*"
  }
}

被 sessioninjector 拦截之后的配置对象是这样的:

<!-- lang: js -->
{
  "transformrequest": [
    null
  ],
  "transformresponse": [
    null
  ],
  "method": "get",
  "url": "https://api.github.com/users/naorye/repos",
  "headers": {
    "accept": "application/json, text/plain, */*",
    "x-session-token": 415954427904
  }
}

以上内容给大家介绍了angularjs http响应拦截器的相关知识,希望本文分享能够给大家带来帮助。