AngularJS 的 $http 服务及其用法详解

AngularJS 是一个流行的前端框架，它提供了许多内置服务来帮助开发者构建动态的 Web 应用程序。其中一个重要的服务是 $http，它提供了一种简便的方式来进行 HTTP 请求和响应。

本文将详细介绍 AngularJS 的 $http 服务及其用法，包括发送 GET、POST、PUT、DELETE 请求、处理响应、使用拦截器等方面。

发送 HTTP 请求

使用 $http 服务发送 HTTP 请求非常简单。我们只需要使用 $http 方法并传递一个配置对象即可。

$http({
    method: 'GET',
    url: '/api/data'
}).then(function(response) {
    // 处理响应
}, function(response) {
    // 处理错误
});

在上面的代码中，我们用 $http 方法发送一个 GET 请求，并指定了请求的 URL。在请求成功时，将执行第一个回调函数，否则将执行第二个回调函数。

除了 GET 请求，我们还可以发送 POST、PUT、DELETE 请求。只需要将 method 参数设置为对应的值即可。

$http({
    method: 'POST',
    url: '/api/data',
    data: {
        name: 'John',
        age: 30
    }
}).then(function(response) {
    // 处理响应
}, function(response) {
    // 处理错误
});

在上面的代码中，我们用 $http 方法发送一个 POST 请求，并通过 data 参数传递了一个对象。

处理响应

在发送 HTTP 请求后，我们需要处理响应。$http 服务返回的是一个 Promise 对象，我们可以使用 then 方法来处理响应。

$http({
    method: 'GET',
    url: '/api/data'
}).then(function(response) {
    console.log(response.data);
}, function(response) {
    console.log('请求失败：' + response.status);
});

在上面的代码中，我们使用 then 方法来处理成功和失败的响应。在成功的情况下，我们打印出响应的数据。在失败的情况下，我们打印出响应的状态码。

使用拦截器

拦截器是 $http 服务中一个非常有用的功能。它允许我们在请求或响应被发送或接收之前修改它们。我们可以使用拦截器来添加认证标头、转换请求和响应数据等。

$httpProvider.interceptors.push(function($q, AuthService) {
    return {
        request: function(config) {
            // 在请求中添加认证标头
            var token = AuthService.getToken();
            if (token) {
                config.headers.Authorization = 'Bearer ' + token;
            }
            return config;
        },
        response: function(response) {
            // 转换响应数据
            if (response.data) {
                response.data = response.data.results;
            }
            return response;
        },
        responseError: function(rejection) {
            // 处理错误响应
            if (rejection.status === 401) {
                AuthService.logout();
            }
            return $q.reject(rejection);
        }
    };
});

在上面的代码中，我们定义了一个拦截器，它在请求中添加了认证标头，在响应中转换了响应数据，并处理了错误响应。

总结

在本文中，我们详细介绍了 AngularJS 的 $http 服务及其用法。我们学习了如何发送 GET、POST、PUT、DELETE 请求，如何处理响应，以及如何使用拦截器。这些知识对于开发动态 Web 应用程序非常重要，希望本文能够对读者有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c484adadd4f0e0fff0afcb