How to call a specific promise only once in Angular 1.5 when onInit hook is called multiple times

Question

There is a API call that I am making on the onInit function.

   vm.$onInit = function() {
        var callInProgress = false;
        var resultsLoaded = false;

        var url = '/api/times/cst';
        if(callInProgress === false && resultsLoaded ===false){
            callInProgress = true;
            HttpWrapper.send(url,{"operation":'GET'}).then(function(result){
                vm.times = result;
                resultsLoaded = true;
                },function(error){
                vm.errorInApi = true;
            });
        }

Now $onInit is being called multiple times hence the two flags callInProgress, resultsLoaded are being initialized every time.

So, the check is kind of not working.

The API is being called each time the $onInit is called, multiple times on initialization.

How can I make the call only once? It has be called on $onInit though.

Answer 1

I advice wrapping the API call in a service like:

(function (angular) {
    'use strict';

    angular
        .module('services.common')
        .service('TimesService', TimesService);

    TimesService.$inject = ['HttpWrapper'];

    function TimesService(HttpWrapper) {
        var timesService = this;
        var timesResult = null;

        timesService.getTimes = getTimes;

        function getTimes() {
            if (!timesResult) {
                timesResult = HttpWrapper.send('/api/times/cst', {"operation": 'GET'});
            }
            return timesResult;
        }

        return timesService;
    }

})(angular);

and then inject it into your controller and use like TimesService.getTimes().then(...) , so the call to the API will be done only once on the first call of TimesService.getTimes (since the result would be stored in timesResult inside of the service).

Answer 2

callInProgress and resultsLoaded are within the onInit function and part of the directive controller. They are going to get created each time you use the directive. Using a controller property on the containing controller to do something similar would be the way to go. You can use bindings to specify the controller property you need to keep this somewhat generic.