Angularjs Handle Calling Promise Multiple Times With Some Exceptions

I asked this question before (AngularJS handle calling promise multiple times) and now I have different obstacle. Now I have to get cities list but there is an exception. Cities c

Solution 1:

Same answer as your other question, just map to country code to the promise. Also same as before, consider the error case.

var vm = this;

vm.cityPromises = {};

functiongetCities(countryCode) {
    if (!vm.cityPromises[countryCode]) {
        vm.cityPromises[countryCode] = $http({
            method: 'POST',
            cache: true,
            url: API + '/api/Global/Countries',
        }).then(functionsuccessCallback(response) {
            if (errorHandler(response.data)) {
                console.log("ajax")
                return response.data;
            }
        });
    } else {
        console.log("cache")
    }
    return vm.cityPromises[countryCode];
}

Solution 2:

You can use your own promise here. Don't forget injecting the $q service.

var cityCache = {};

vm.getCities = function (countryCode) {

    var deferred = $q.defer();
    if (countryCode!=undefined && !cityCache[countryCode]) {
        vm.cityPromise = $http({
            method: 'POST',
            cache: true,
            url: API + '/api/Global/CountryCities',
            data: {
                "CountryCode": countryCode
            }
        }).then(functionsuccessCallback(response,countryCode) {
            if (errorHandler(response.data)) {
                cityCache[response.config.data.CountryCode] = response.data;
                deferred.resolve(response.data);
            }
            else{
                deferred.reject();
            }
        });
    } 
    else {
         vm.cityPromise = $timeout(function () {//I use this to get promise object
             deferred.resolve(cityCache[countryCode]);
        }, 0);
    }

    return deferred.promise;
}

Solution 3:

Try to use the $q service from angular:

updated to prevent multiple call of same city:

FIDDLE

the service:

.service("cityService", function($http, $q, $httpParamSerializerJQLike){
    //var callCache = {};var cityCache = {};
    return {
        getCities: function(countryCode){

            //if(callCache[countryCode] === undefined){var promise = $q.defer();
           //     callCache[countryCode] = promise;//}else{//      console.log("return cached promise!!", callCache[countryCode]);//      return callCache[countryCode].promise;//}if (countryCode!=undefined && !cityCache[countryCode]) {
                    console.log("new city");
                var data = $httpParamSerializerJQLike({
                    json: JSON.stringify({
                        name: countryCode+Math.random().toString(36).substring(7)
                    })
                });
                $http({
                    method: 'POST',
                    url:"/echo/json/",
                    data: data
                }).then(function(risp) {
                        console.log("servicelog",risp.data);
                        cityCache[countryCode] = risp.data;
                    var obj = angular.extend({cache: false}, risp.data);
                    promise.resolve(obj);
                    //callCache[countryCode].resolve(obj);//delete callCache[countryCode];
                });
            }else{
                setTimeout(function(){
                        var obj = angular.extend({cache: true}, cityCache[countryCode]);
                    promise.resolve(obj);
                    //callCache[countryCode].resolve(obj)//delete callCache[countryCode];
                }, 1000)
            }
            return promise.promise;
        }
    }  
});

Solution 4:

I solved my problem by creating an object for the promise and many thanks to @Luke Harper for helping me before and now :) His answer is also correct but I must add a bit more code for my app.

If you see any problem in my code, please write to me so that I would edit the answer

So here is my solution:

vm.cityPromise = {};
vm.getCities = function(countryCode) {
    vm.cityPromise["cityCache"] = countryCode;
    if (!vm.cityPromise[countryCode]) {
        if (countryCode != undefined && !cityCache[countryCode]) {
            vm.cityPromise[countryCode] = $http({
                method: 'POST',
                cache: true,
                url: API + '/api/Global/CountryCities',
                data: {
                    "CountryCode": countryCode
                }
            }).then(functionsuccessCallback(response, countryCode) {
                if (errorHandler(response.data)) {
                    cityCache[response.config.data.CountryCode] = response.data;
                    console.log("cities ajax, cityCache", cityCache)
                    return response.data
                }
            },functionerror(response){
                console.log ("error:",response)
            });
        } else {
            vm.cityPromise[countryCode] = $timeout(function() {
                return cityCache[countryCode]
            }, 0)
            console.log("getCities cache");
        }
    }
    return vm.cityPromise[countryCode];
}