AngularJS：防止调用多个$ http请求以获取相同数据

Question

I still don't understand how the Promise API works. I want to know if there's a way to get a data whenever I need it without calling multiple HTTP request. Here's an exemple :

Session Service : All it does is either get the session object (which contains datas) or get session ID which returns a number.

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;

}]);

Request HTTP Service : This service only does HTTP request.

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;
        }
    };
}]);

So to get my Session Object, I do sessionFactory.getCurrentSession with callback function(then...) and it works perfect. Later on, I only need to get the session ID so I would do sessionFactory.sessionID, but it works only if I add the callback function (then...), why is that? I thought my global JavaScript object oSession already has data since the first HTTP request.

I want to prevent doing a spaghetti code and keep the code as clean as possible, with a more object approach. Is it possible?

Answer 1

It looks like you're trying to do too much with the promise API. It's already built into the $http service so you shouldn't need to invoke it yourself. Try this instead:

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);
                });
        }
    };
}]);

By returning the result of the $http call, you are in fact returning a promise. You can then chain additional resolution code onto the return value. See the "Chaining Promises" section of the $q documentation .

Answer 2

IF you want to cache your previous http response so that it will not make an http call again

1. you can use angular-cached-resource

   bower install angular-cached-resource

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

   instead of $resource use $cachedResource , it will cache the network call to local storage, every time you make a call it will resolve immediately even though it makes a call to backend and updated the cache.

2. you can also use angular-cache it will cache all your http get calls you can set timeout as well exclude url in its configuration

bower install angular-cache