AngularJS 中的 HTTP 请求封装

在 AngularJS 中，我们经常需要与后端进行数据交互，这时就需要用到 HTTP 请求。然而，直接使用 AngularJS 提供的 $http 服务并不够方便和灵活，因此我们可以对其进行封装，以便更好地管理和调用 HTTP 请求。

封装思路

我们可以将 HTTP 请求封装成一个服务，在服务内部实现对 $http 服务的调用，同时提供一些额外的功能，如自定义请求头、请求超时等。此外，我们还可以在服务内部对请求进行统一拦截和处理，比如添加 token、处理错误信息等。

封装实现

下面是一个简单的 HTTP 请求封装的示例代码：

// javascriptcn.com 代码示例
angular.module('myApp')
    .factory('httpService', function($http, $q) {
        var service = {};

        // 设置默认请求头
        $http.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token');

        // 统一处理错误信息
        function handleError(error) {
            console.log(error);
            return $q.reject(error);
        }

        // GET 请求
        service.get = function(url, params) {
            var config = {
                params: params
            };
            return $http.get(url, config).then(function(response) {
                return response.data;
            }, handleError);
        };

        // POST 请求
        service.post = function(url, data) {
            return $http.post(url, data).then(function(response) {
                return response.data;
            }, handleError);
        };

        // PUT 请求
        service.put = function(url, data) {
            return $http.put(url, data).then(function(response) {
                return response.data;
            }, handleError);
        };

        // DELETE 请求
        service.delete = function(url) {
            return $http.delete(url).then(function(response) {
                return response.data;
            }, handleError);
        };

        return service;
    });

在上面的代码中，我们定义了一个名为 httpService 的服务，其中包含了 GET、POST、PUT 和 DELETE 四种请求方法。在服务初始化时，我们设置了默认的请求头，并定义了一个 handleError 函数，用于统一处理错误信息。

在每个请求方法中，我们对 $http 服务进行了封装，并在 then 方法中返回了响应数据。如果请求失败，则会调用 handleError 函数进行统一处理。通过这种方式，我们可以更方便地使用 HTTP 请求，并对其进行统一管理和处理。

使用方法

使用 httpService 服务非常简单，只需要在需要的地方注入该服务，并调用其相应的方法即可。例如：

// javascriptcn.com 代码示例
angular.module('myApp')
    .controller('myController', function(httpService) {
        // GET 请求
        httpService.get('/api/users', {page: 1})
            .then(function(data) {
                console.log(data);
            });

        // POST 请求
        httpService.post('/api/users', {name: 'John', age: 30})
            .then(function(data) {
                console.log(data);
            });
    });

在上面的代码中，我们在一个名为 myController 的控制器中使用了 httpService 服务，并分别调用了其 GET 和 POST 方法。通过这种方式，我们可以更方便地管理和调用 HTTP 请求，同时也可以对请求进行统一处理和拦截。

总结

通过对 HTTP 请求的封装，我们可以更方便地管理和调用 HTTP 请求，并对其进行统一处理和拦截。在实际开发中，我们可以根据具体需求对 httpService 服务进行扩展和优化，以便更好地满足项目的需求。

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