AngularJS全局HTTP响应拦截器详解与应用

在AngularJS中，HTTP响应拦截器是一个强大的工具，它允许开发者在HTTP请求发送到服务器或服务器响应返回客户端时，从全局角度添加或修改操作。这个特性对于实现诸如身份验证、错误处理、日志记录等通用功能至关重要。本文档将深入浅出地探讨AngularJS中的HTTP响应拦截器的工作原理及其在实际开发中的应用。 首先，让我们了解一下为何需要HTTP响应拦截器。当需要为所有的HTTP请求添加某种共享行为，如设置统一的头信息、处理跨域问题，或者在成功或失败时执行特定逻辑时，使用拦截器可以避免在每个控制器或服务中重复编写相同的代码，从而提高代码的复用性和可维护性。 AngularJS的HTTP拦截器主要包括以下几个方法： 1. `request` 方法：这是在请求发送到服务器前被调用的拦截器，它接受一个`requestConfigurationObject`作为参数。开发者可以通过修改这个对象来定制请求的行为，例如设置自定义头、配置超时时间等。如果返回的配置无效或Promise被拒绝，请求将不会被发送，可能导致HTTP调用失败。 2. `response` 方法：当服务器响应返回时，此方法会被调用。它接收一个`responseObject`，包含了请求配置、头信息、状态码和数据。开发者可以在此处理接收到的数据，或者对响应进行任何其他形式的处理。同样，返回无效的响应或Promise也会导致调用失败。 3. `requestError` 和 `responseError` 方法：这两个方法用于处理请求或响应特别的情况。`requestError` 拦截器捕获那些由于上一个拦截器而被拒绝的请求，可以用于恢复请求或者撤销之前的操作。而 `responseError` 则针对后台调用失败或被拦截器中断的情况，提供了一种恢复机制。 在AngularJS中，实现这些拦截器的核心在于创建一个服务工厂，并将其注入到`$httpProvider`的`interceptors`数组中。通过这种方式，可以灵活地添加和管理多个拦截器。AngularJS内置了`request`和`response`两种通用拦截器，以及`requestError`和`responseError`用于处理异常情况的特殊拦截器。 以下是一个简单的示例代码片段： ```javascript angular.module("myApp", []) .factory("myInterceptor", function($q, $log) { return { request: function(config) { // 在这里添加请求前的处理，如设置默认头信息 config.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token'); return config; }, response: function(response) { // 处理响应数据，比如解析JSON if (response.status === 200) { response.data = JSON.parse(response.data); } return response || $q.when(response); }, responseError: function(rejection) { // 错误处理，比如显示错误消息 $log.error('请求失败：', rejection); return $q.reject(rejection); } }; }) .config(function($httpProvider) { $httpProvider.interceptors.push('myInterceptor'); }); ``` AngularJS HTTP响应拦截器提供了一种灵活且易于管理的方式来扩展和定制HTTP请求和响应过程，使得开发人员能够更好地控制应用程序与服务器之间的交互，提升代码的可复用性和用户体验。