AngularJS 拦截所有 $http JSON 响应

作者:编程家 分类: angularjs 时间:2025-11-21

在使用AngularJS时,我们经常需要与服务器进行数据交互,而$http是AngularJS中常用的用于发送HTTP请求的服务。当我们发送请求并接收到服务器返回的JSON响应时,有时候需要对这些响应进行处理或者进行一些额外的操作。这时候,拦截器(interceptor)就能派上用场了。

什么是拦截器(interceptor)?

拦截器是一种机制,它能够在请求被发送到服务器之前或者在接收到响应之后,对请求或响应进行一些额外的处理。在AngularJS中,我们可以通过注册拦截器来对$http服务的请求和响应进行拦截和处理。

拦截所有$http JSON响应的步骤

要拦截所有$http JSON响应,我们需要在AngularJS应用中定义一个拦截器,并将其注册到$http拦截器队列中。下面是具体的步骤:

1. 首先,我们需要创建一个AngularJS模块,并将其作为应用的依赖模块。

javascript

var app = angular.module('myApp', []);

2. 然后,我们需要使用config方法来注册拦截器。

javascript

app.config(function($httpProvider) {

$httpProvider.interceptors.push('myInterceptor');

});

3. 接下来,我们需要定义一个拦截器服务,并实现请求和响应拦截的逻辑。

javascript

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

var interceptor = {

response: function(response) {

// 在这里对响应进行处理

if (response.config.url.endsWith('.json')) {

// 对JSON响应进行特殊处理

console.log('Intercepted JSON response');

}

return response;

}

};

return interceptor;

});

在上面的代码中,我们定义了一个名为myInterceptor的拦截器服务,并实现了response方法。在这个方法中,我们可以对响应进行一些额外的处理,比如对JSON响应进行特殊处理。

案例代码

下面是一个简单的案例代码,演示了如何拦截所有$http JSON响应并进行处理:

javascript

var app = angular.module('myApp', []);

app.config(function($httpProvider) {

$httpProvider.interceptors.push('myInterceptor');

});

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

var interceptor = {

response: function(response) {

if (response.config.url.endsWith('.json')) {

console.log('Intercepted JSON response');

}

return response;

}

};

return interceptor;

});

app.controller('myController', function($http) {

$http.get('data.json').then(function(response) {

console.log(response.data);

});

});

在上面的代码中,我们定义了一个控制器myController,并在其中使用$http服务发送了一个GET请求。当接收到服务器返回的JSON响应时,拦截器会被触发,并在控制台输出"Intercepted JSON response"。

通过以上的步骤,我们成功地拦截了所有$http JSON响应,并对其进行了特殊处理。拦截器的使用让我们能够更加灵活地对请求和响应进行处理,为我们提供了更多的控制权。