AngularJS 中 $http 的拦截器使用方法

在 AngularJS 中，$http 是一个非常重要的服务，它用于发送 HTTP 请求并获取响应。在实际开发中，我们可能需要对 HTTP 请求进行一些特殊的处理，比如添加请求头、修改请求内容、拦截响应等等。这时，就可以使用 $http 的拦截器来实现。

$http 拦截器介绍

$http 拦截器是一个用于拦截 HTTP 请求和响应的机制。它是 AngularJS 提供的一个非常强大的功能，可以让我们在发送 HTTP 请求和接收响应之前或之后，对请求和响应进行一些特殊的处理。

在 AngularJS 中，$http 拦截器有两种类型：请求拦截器和响应拦截器。请求拦截器会在发送 HTTP 请求之前被调用，而响应拦截器会在接收到 HTTP 响应后被调用。

使用方法

在 AngularJS 中，我们可以通过 $httpProvider 来注册拦截器。$httpProvider 是 $http 的服务提供者，它可以用来配置 $http 的默认设置和拦截器。

以下是一个简单的示例，用于添加请求头：

angular.module('myApp', [])
  .config(function($httpProvider) {
    $httpProvider.interceptors.push(function($q) {
      return {
        'request': function(config) {
          config.headers['X-Requested-With'] = 'XMLHttpRequest';
          return config;
        }
      };
    });
  });

在这个示例中，我们使用 $httpProvider.interceptors.push() 方法来添加一个请求拦截器。这个拦截器会在发送 HTTP 请求之前被调用，并将一个自定义的请求头添加到请求中。

在拦截器函数中，我们可以使用 $q 来返回一个 Promise 对象。如果返回的是一个 resolved 状态的 Promise 对象，那么请求会继续发送；如果返回的是一个 rejected 状态的 Promise 对象，那么请求会被取消。

以下是一个更加复杂的示例，用于拦截响应并进行一些特殊的处理：

angular.module('myApp', [])
  .config(function($httpProvider) {
    $httpProvider.interceptors.push(function($q) {
      return {
        'response': function(response) {
          if (response.status === 200 && response.data.success === false) {
            // 如果响应状态为 200，但 success 属性为 false，则认为响应是错误的
            return $q.reject(response);
          }
          return response;
        },
        'responseError': function(rejection) {
          if (rejection.status === 401) {
            // 如果响应状态为 401，则认为用户没有权限访问该资源，需要跳转到登录页
            window.location.href = '/login';
          }
          return $q.reject(rejection);
        }
      };
    });
  });

在这个示例中，我们使用 $httpProvider.interceptors.push() 方法来添加一个响应拦截器。这个拦截器会在接收到 HTTP 响应后被调用，并根据响应的状态和内容进行一些特殊的处理。

在拦截器函数中，我们可以使用 response 和 responseError 两个属性来分别处理成功和失败的响应。如果响应符合我们的预期，我们可以返回 response 对象；如果响应不符合我们的预期，我们可以使用 $q.reject() 方法来取消响应并返回一个 rejected 状态的 Promise 对象。

总结

$Http 拦截器是 AngularJS 提供的一个非常强大的功能，可以让我们在发送 HTTP 请求和接收响应之前或之后，对请求和响应进行一些特殊的处理。在实际开发中，我们可以使用拦截器来添加请求头、修改请求内容、拦截响应等等，从而实现更加灵活和高效的开发。

以上就是 AngularJS 中 $http 的拦截器使用方法的详细介绍，希望对大家有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658d914ceb4cecbf2d38633b