AngularJS 是一个流行的前端框架，它提供了强大的工具来处理异步请求。其中，$http 服务是 AngularJS 中最常用的服务之一，用于发送 HTTP 请求并处理响应。
在本文中，我们将深入探讨 AngularJS 中 $http 的使用方法和原理，帮助读者更好地理解和使用这个服务。
发送 HTTP 请求
使用 $http 发送 HTTP 请求非常简单。我们只需要调用 $http 方法，传入一个配置对象，即可发送请求。例如：
$http({
method: 'GET',
url: '/api/users'
}).then(function(response) {
console.log(response.data);
}, function(error) {
console.error(error);
});上面的代码中，我们使用 $http 发送了一个 GET 请求，请求的地址是 /api/users。请求成功时，我们会在控制台输出响应的数据；请求失败时，我们会输出错误信息。
除了 GET 请求，$http 还支持 POST、PUT、DELETE 等常见的 HTTP 方法。我们只需要在配置对象中指定相应的方法即可。
处理响应
当我们发送 HTTP 请求时，服务器会返回一个响应。$http 会将响应包装成一个对象，其中包含了响应的状态码、响应头和响应体等信息。我们可以通过 then 方法来处理这个响应对象。
例如，如果我们想要获取响应的数据，可以使用 response.data 属性：
$http({
method: 'GET',
url: '/api/users'
}).then(function(response) {
console.log(response.data);
}, function(error) {
console.error(error);
});如果我们想要获取响应的状态码，可以使用 response.status 属性：
$http({
method: 'GET',
url: '/api/users'
}).then(function(response) {
console.log(response.status);
}, function(error) {
console.error(error);
});除了 data 和 status 属性，$http 还提供了很多其他的属性和方法，可以帮助我们更好地处理响应。读者可以查阅官方文档来了解更多信息。
处理错误
当我们发送 HTTP 请求时，可能会发生错误，例如网络错误、服务器错误等。$http 提供了一个 error 回调函数，用于处理这些错误。
例如，如果我们想要在发生错误时输出错误信息，可以使用以下代码：
$http({
method: 'GET',
url: '/api/users'
}).then(function(response) {
console.log(response.data);
}, function(error) {
console.error(error);
});在上面的代码中，我们使用了一个 error 回调函数来处理错误。如果请求失败，$http 会调用这个回调函数，并将错误信息作为参数传递进去。
拦截器
$http 还提供了拦截器（interceptor）的功能，可以在请求或响应被处理之前或之后执行一些操作。
例如，我们可以使用请求拦截器来为每个请求添加一个 Authorization 头：
$httpProvider.interceptors.push(function() {
return {
request: function(config) {
config.headers.Authorization = 'Bearer ' + localStorage.getItem('token');
return config;
}
};
});在上面的代码中，我们使用了一个请求拦截器，它会在每个请求被发送之前执行。我们在请求配置对象的 headers 属性中添加了一个 Authorization 头，这个头的值是从本地存储中获取的 token。
除了请求拦截器，$http 还支持响应拦截器，可以在响应被处理之前或之后执行一些操作。读者可以查阅官方文档来了解更多信息。
总结
本文介绍了 AngularJS 中 $http 的使用方法和原理，包括发送 HTTP 请求、处理响应、处理错误和拦截器等功能。$http 是 AngularJS 中非常重要的服务之一，掌握它的使用方法对于开发高质量的 Web 应用非常重要。我们希望读者通过本文的学习，能够更好地理解和使用 $http 服务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c5e268add4f0e0ff066a0a