AngularJS：防止调用多个 $http 请求来获取相同的数据答案

【问题标题】：AngularJS: Prevent calling multiple $http request to get same dataAngularJS：防止调用多个 $http 请求来获取相同的数据
【发布时间】：2014-04-24 14:58:45
【问题描述】：

我仍然不明白 Promise API 的工作原理。我想知道是否有一种方法可以在需要时获取数据而无需调用多个 HTTP 请求。这是一个例子：

会话服务：它所做的只是获取会话对象（包含数据）或获取返回数字的会话 ID。

app.factory('sessionFactory', ['$resource', 'requestFactory',
function ($resource, requestFactory) {

    var oSession = {};

    var session = {
        /**
         * Get session ID
         * @return {Number}
         */
        sessionID: function () {
            if (typeof oSession.id !== "undefined") {
                return oSession.id;
            } else {
                return requestFactory.getObject('/application/current_session').then(function (response) {
                    oSession = response;
                    return oSession.id;
                });
            }
        },

        /**
         * Get session object (GET)
         * @return {Object} data in JSON format
         */
        getCurrentSession: function () {
            if (!oSession.id) {
                return requestFactory.getObject('/application/current_session').then(function (response) {
                    oSession = response;
                    return oSession;
                });
            }
        }
    };

    return session;

}]);

请求 HTTP 服务：该服务只做 HTTP 请求。

app.factory('requestFactory', ['$http', '$q', '$timeout',
function ($http, $q, $timeout) {
    return {
        getObject: function (jsonURL, params) {
            // $q service object
            var deferred = $q.defer();

            // regular ajax request
            $http({
                method: 'GET',
                url: jsonURL,
                params: params
            })
                .success(function (result, status, headers, config) {
                    // promise resolve
                    deferred.resolve(result);
                })
                .error(function (result, status, headers, config) {
                    // called asynchronously if an error occurs
                    // or server returns response with an error status.
                    deferred.reject('Erreur request : ' + status);
                });

            return deferred.promise;
        }
    };
}]);

为了获得我的 Session 对象，我使用回调函数执行 sessionFactory.getCurrentSession(then...)，它运行良好。稍后，我只需要获取会话 ID，所以我会做 sessionFactory.sessionID，但它只有在我添加回调函数时才有效（然后......），这是为什么呢？我认为我的全局 JavaScript 对象 oSession 自第一次 HTTP 请求以来已经有数据了。

我想避免编写意大利面条式代码，并使用更对象的方法尽可能保持代码简洁。有可能吗？

【问题讨论】：

标签： ajax angularjs http promise deferred

【解决方案1】：

您似乎在尝试使用 Promise API 做太多事情。它已经内置在 $http 服务中，因此您不需要自己调用它。试试这个：

app.factory('requestFactory', ['$http',
function ($http) {
    return {
        getObject: function (jsonURL, params) {
            // regular ajax request
            return $http({
                method: 'GET',
                url: jsonURL,
                params: params
            })
                .success(function (result, status, headers, config) {
                    return result;
                })
                .error(function (result, status, headers, config) {
                    // called asynchronously if an error occurs
                    // or server returns response with an error status.
                    throw new Error('Erreur request : ' + status);
                });
        }
    };
}]);

通过返回 $http 调用的结果，您实际上是在返回一个 Promise。然后，您可以将其他解析代码链接到返回值。请参阅$q documentation 的“Chaining Promises”部分。

【讨论】：

【解决方案2】：

如果你想缓存你之前的 http 响应，这样它就不会再次进行 http 调用了

你可以使用angular-cached-resource

凉亭安装角度缓存资源

angular.module('myApp',['ngCachedResource'])

而不是$resource 使用$cachedResource，它会将网络调用缓存到本地存储，每次调用它都会立即解析，即使它调用后端并更新了缓存。
你也可以使用angular-cache，它会缓存你所有的http get调用，你可以设置超时以及在其配置中排除url

凉亭安装角度缓存

【讨论】：