AngularJS $http拦截器深度解析

"本文将深入探讨AngularJS中的HTTP拦截器，讲解如何利用$http服务在发送请求前和接收响应后执行特定操作。通过创建和注册拦截器，我们可以实现如身份验证、日志记录、错误处理等功能。" 在AngularJS中，HTTP拦截器是一种强大的工具，它允许开发者在HTTP请求生命周期的不同阶段插入自定义逻辑。这通常用于在请求被发送到服务器之前添加额外的头部信息、处理响应数据、或者在请求失败时进行错误处理。$http服务是AngularJS内置的服务，用于与服务器进行数据交换。 首先，我们需要创建一个拦截器。这通常通过`app.factory`方法完成，如下所示： ```javascript app.factory('myInterceptor', ['$log', function($log) { $log.debug(''); var myInterceptor = {}; return myInterceptor; }]); ``` 在这个例子中，`myInterceptor`是一个空对象，但实际应用中，我们将定义`request`和/或`response`函数，以便在相应的HTTP操作时执行。 接下来，我们需要注册这个拦截器。这通常在应用程序配置阶段完成，通过调用`$httpProvider.interceptors.push`： ```javascript app.config(['$httpProvider', function($httpProvider) { $httpProvider.interceptors.push('myInterceptor'); }]); ``` 一旦拦截器被注册，它就会自动参与到每次HTTP请求的生命周期中。 ### 请求拦截器 请求拦截器可以在请求被发送到服务器之前进行干预。例如，我们可以添加一个异步操作，如认证检查： ```javascript app.factory('myRequestInterceptor', ['someAsyncService', '$q', function(someAsyncService, $q) { var requestInterceptor = { request: function(config) { var deferred = $q.defer(); someAsyncService.doAsyncOperation().then(function() { deferred.resolve(config); }, function() { deferred.resolve(config); }); return deferred.promise; } }; return requestInterceptor; }]); ``` 这里，`doAsyncOperation`是一个模拟的异步操作，根据其结果决定是否继续发送请求。 ### 响应拦截器 响应拦截器则在服务器返回响应之后运行，可以用来处理响应数据，或者处理错误。例如： ```javascript app.factory('myResponseInterceptor', ['someAsyncService', '$q', function(someAsyncService, $q) { var responseInterceptor = { response: function(response) { var deferred = $q.defer(); someAsyncService.doAsyncOperation().then(function(response) { deferred.resolve(response); }, function(error) { deferred.reject(error); }); return deferred.promise; } }; return responseInterceptor; }]); ``` 响应拦截器同样可以处理异步操作，并根据其结果决定是否成功解析响应，或者抛出错误。 总结来说，AngularJS的HTTP拦截器提供了一种灵活的方式来扩展和定制HTTP通信。通过它们，开发者可以实现诸如自动处理令牌、记录请求日志、处理错误等复杂功能，从而增强应用程序的功能和用户体验。