Angular中的$http服务有什么作用？

八股文_Angular面试题 0 36

参考回答

在AngularJS中，$http服务用于与服务器进行通信，支持发送HTTP请求并接收响应。它提供了一种简单、易用的方式来处理AJAX请求，并自动将响应数据与Angular的作用域绑定。

常用功能：
– 支持GET、POST、PUT、DELETE等HTTP方法。
– 支持请求和响应拦截器，用于全局处理HTTP逻辑。
– 自动集成到Angular的$digest周期中，更新视图。

简单示例：

$http.get('/api/data')
    .then(function(response) {
        $scope.data = response.data;
    }, function(error) {
        console.error('Error:', error);
    });

详细讲解与拓展

1. `$http`的基本用法

$http服务的基本语法如下：

$http({
    method: 'GET',
    url: '/api/resource',
    params: { id: 123 },  // GET请求参数
    headers: { 'Authorization': 'Bearer token' } // 自定义请求头
}).then(function(response) {
    // 成功时的回调
    console.log(response.data);
}, function(error) {
    // 失败时的回调
    console.error(error);
});

常用HTTP方法的简化调用：

$http.get(url, [config]);
$http.post(url, data, [config]);
$http.put(url, data, [config]);
$http.delete(url, [config]);

2. 响应结构

每个$http请求返回一个Promise对象，成功时返回以下响应结构：

{
    data: // 响应数据（已解析，通常是JSON对象）
    status: // HTTP状态码
    headers: // 响应头信息
    config: // 请求的配置信息
    statusText: // 状态文本
}

3. 处理错误

可以通过then方法的第二个回调或catch来处理错误：

$http.get('/api/data')
    .then(function(response) {
        $scope.data = response.data;
    })
    .catch(function(error) {
        console.error('Request failed:', error.status);
    });

4. 高级功能

请求参数

通过params配置向服务器发送查询参数：

$http.get('/api/data', {
    params: { key1: 'value1', key2: 'value2' }
});

设置请求头

使用headers字段自定义请求头：

$http.post('/api/data', { name: 'John' }, {
    headers: { 'Content-Type': 'application/json' }
});

拦截器

拦截器允许在请求发送或响应接收之前进行处理。
注册请求和响应拦截器：

app.config(function( $httpProvider) {$ httpProvider.interceptors.push(function() {
        return {
            request: function(config) {
                console.log('Request sent:', config);
                return config;
            },
            response: function(response) {
                console.log('Response received:', response);
                return response;
            }
        };
    });
});

5. 与视图绑定

$http请求会自动触发Angular的$digest周期，无需手动调用$apply即可更新视图。例如：

$http.get('/api/data').then(function(response) {
    $scope.data = response.data; // 自动更新视图
});

6. 实践与注意事项

统一处理错误
可以使用拦截器捕获所有请求的错误：

app.config(function( $httpProvider) {$ httpProvider.interceptors.push(function( $q) { return { responseError: function(rejection) { console.error('HTTP Error:', rejection.status); return$ q.reject(rejection);
            }
        };
    });
});

缓存数据
Angular支持缓存GET请求结果，可以通过cache选项启用：

$http.get('/api/data', { cache: true });

防止CSRF攻击
确保在请求头中添加CSRF令牌（如果后端需要）：

$http.defaults.headers.common['X-CSRF-Token'] = 'your-csrf-token';

取消请求
可以通过$http的timeout选项取消长时间未完成的请求：

var canceler =  $q.defer();$ http.get('/api/data', { timeout: canceler.promise });
canceler.resolve(); // 取消请求

总结

$http是AngularJS中功能强大的HTTP服务，它不仅简化了与服务器通信的过程，还与框架的双向绑定、拦截器机制集成得非常好。在使用时，应注意性能优化（如缓存）、全局错误处理和安全性配置。合理利用这些特性，可以大大提升应用的可靠性和开发效率。