详解AngularJS中的http拦截

AngularJS中的HTTP拦截：深入理解与实现

在AngularJS中，$http服务是我们与服务端进行交互的桥梁。有时，我们希望在发出请求之前以及收到响应之后进行一些操作，这就是HTTP拦截的用途。

$httpProvider为我们提供了一个强大的工具，它包含了一个（interceptors）的数组。允许我们在请求被发送出去之前或响应被接收之前对其进行修改。

如何创建并注册一个呢？我们需要定义一个工厂来创建：

```javascript

app.factory('myInterceptor', ['$log', function($log){

var myInterceptor = {};

// 在这里定义你的拦截逻辑

return myInterceptor;

}])

```

然后，我们需要在配置阶段将这个注册到$httpProvider中：

```javascript

app.config(['$httpProvider', function($httpProvider){

$httpProviderterceptors.push('myInterceptor');

}])

```

接下来，让我们看一些的实例。比如，我们可以在请求被发送之前进行一些异步操作：

```javascript

app.factory('myInterceptor', ['someAsyncService', function(someAsyncService){

return {

request: function(config){

return someAsyncService.doAsyncOperation().then(function(){

// 根据异步操作的结果更新config

return config;

});

}

};

}])

```

同样，我们也可以对响应进行拦截：

```javascript

app.factory('myInterceptor', ['someAsyncService', function(someAsyncService){

return {

response: function(response){

return someAsyncService.doAsyncOperation().then(function(data){

// 处理响应数据后返回新的响应对象或进行其他操作

return response;

});

}

};

}])

```

我们还可以实现Session拦截和请求拦截。对于基于token的验证，当用户登录时，我们会从服务端获取一个token。这个token需要在每次请求时都发送给服务端。这时，我们就可以使用在每次请求时自动添加这个token。这样，我们就不必在每个请求中都手动添加这个token了。这些都是HTTP拦截的常用场景。在实际开发中，根据需求我们可以灵活地运用HTTP来实现各种功能。构建一个会话注入器与实时跟踪时间戳的HTTP

在应用中，会话信息通常是非常重要的，特别是当涉及到服务端验证的时候。跟踪请求和响应的时间戳对于性能分析和调试非常有帮助。为此，我们可以创建一个会话注入器和一个时间戳。

创建会话注入器（Session Injector）

我们来创建一个会话注入器工厂。这个工厂将会获取会话服务中的token，并将其添加到请求的头部中。当发起请求时，这个注入器会检查用户是否已登录，如果是，则添加会话令牌到请求头中。

```javascript

app.factory('sessionInjector', ['SessionService', function(SessionService) {

var sessionInjector = {

request: function(config) {

if (!SessionService.isAnonymous) { // 如果用户已登录

config.headers['x-session-token'] = SessionService.token; // 添加会话令牌到请求头

}

return config; // 返回配置好的请求对象

}

};

return sessionInjector; // 返回会话注入器对象

}]);

```

注册这个以便在所有HTTP请求之前运行：

```javascript

app.config(['$httpProvider', function($httpProvider) {

$httpProviderterceptors.push('sessionInjector'); // 注册会话注入器

}]);

```

创建时间戳（Timestamp Interceptor）

接下来，创建一个时间戳来记录请求和响应的时间。这个将在请求发出时记录时间戳，并在响应返回时再次记录时间戳。这样我们就可以计算请求所花费的时间。

```javascript

app.factory('timestampMarker', [function() {

var timestampMarker = {

request: function(config) { // 请求发出时记录时间戳

config.requestTimestamp = new Date().getTime(); // 设置请求发出时的时间戳

return config; // 返回配置好的请求对象

},

response: function(response) { // 响应返回时记录时间戳并计算耗时

response.config.responseTimestamp = new Date().getTime(); // 设置响应返回时的时间戳

console.log('Request took:', response.config.responseTimestamp - response.config.requestTimestamp, 'ms'); // 输出请求耗时信息到控制台（可选）

return response; // 返回响应对象或修改后的响应对象（如果需要）

}

};

return timestampMarker; // 返回时间戳对象

}]);

当网络请求跨越时空，时间的测量与错误的应对

在进行网络请求时，我们经常需要了解请求所耗费的时间。这就像给网络请求加上一个计时器，测量从发出请求到收到响应所经历的时间。下面是一段简单的代码，通过控制台输出请求所花费的时间：

```javascript

http.get('').then(function(response){

var time = response.config.responseTime - response.config.requestTimestamp;

console.log('请求耗去的时间为 ' + time);

})

```

在开发中，我们时常会遇到请求被拦截或发生错误的情况。这时，我们需要对请求进行拦截和处理。模拟一个请求拦截的错误情形，我们可以创建一个名为`requestRejector`的工厂：

```javascript

app.factory('requestRejector',['$q', function($q){

var requestRejector = {

request: function(config){

// 拒绝请求模拟错误情形

return $q.reject('requestRejector');

}

};

return requestRejector;

}])

```

紧接着，我们再创建一个名为`requestRecoverer`的工厂来拦截并处理请求错误：

```javascript

app.factory('requestRecoverer',['$q', function($q){

var requestRecoverer = {

requestError: function(rejectReason){

if(rejectReason === 'requestRejector'){

// 恢复请求的处理逻辑

return { / 配置新的请求参数 / }; // 这里省略了具体的配置细节

} else {

return $q.reject(rejectReason); // 其他错误直接拒绝

}

}

};

return requestRecoverer; // 返回对象供注册使用

}])