AngularJS 拦截所有 $http 请求

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

AngularJS 拦截所有 $http 请求

在使用 AngularJS 开发应用程序时,我们经常会遇到需要对所有的 $http 请求进行拦截和处理的情况。拦截 $http 请求可以用于添加认证信息、修改请求头、处理错误等操作,从而实现对网络请求的全局控制。本文将介绍如何使用 AngularJS 来拦截所有的 $http 请求,并提供一个案例代码来帮助理解。

为什么需要拦截 $http 请求

在实际开发中,我们可能需要在每个 $http 请求发送前或响应返回后做一些额外的处理。例如,我们希望在每个请求中添加认证信息,或者在出现错误时统一处理错误信息。如果每个请求都手动处理这些操作,会导致代码冗余和难以维护。因此,我们需要一种机制来拦截所有的 $http 请求,并对其进行处理。

如何拦截 $http 请求

AngularJS 提供了拦截器(interceptor)的概念,用于拦截和转换请求或响应。我们可以通过实现 $httpProvider 的 interceptors 属性来注册拦截器,并在拦截器中对请求进行处理。

下面是一个简单的案例代码,演示了如何使用 AngularJS 拦截所有的 $http 请求:

javascript

// 创建一个 AngularJS 模块

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

// 注册拦截器

app.config(function($httpProvider) {

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

});

// 定义拦截器

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

var interceptor = {};

// 在请求发送前拦截

interceptor.request = function(config) {

// 在这里可以对请求进行处理,例如添加认证信息

config.headers['Authorization'] = 'Bearer ' + getToken();

return config;

};

// 在响应返回后拦截

interceptor.response = function(response) {

// 在这里可以对响应进行处理,例如统一处理错误信息

if (response.status === 401) {

redirectToLogin();

}

return response;

};

return interceptor;

});

// 使用拦截器发送请求

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

$http.get('https://api.example.com/data')

.then(function(response) {

console.log(response.data);

});

});

在上面的代码中,我们首先创建了一个名为 `myApp` 的 AngularJS 模块,并注册了一个名为 `myInterceptor` 的拦截器。然后,在拦截器的 `request` 方法中,我们可以对请求进行处理,例如在请求头中添加认证信息。在拦截器的 `response` 方法中,我们可以对响应进行处理,例如在出现 401 错误时重定向到登录页。

最后,我们在控制器中使用 `$http` 服务发送请求,拦截器会自动对请求进行处理和拦截。

通过拦截器,我们可以在 AngularJS 应用程序中全局控制和处理所有的 $http 请求,从而实现代码的简洁和可维护性。在实际开发中,我们可以根据需求自定义拦截器的行为,以达到更好的开发体验和用户体验。