Ways to ensure a particular promise is executed only once in Angular 1.5 despite multiple calls to the onInit hook

Question

Ways to ensure a particular promise is executed only once in Angular 1.5 despite multiple calls to the onInit hook

When the onInit function is called, an API request is made.

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

The issue arises from $onInit being called multiple times, causing the flags callInProgress and resultsLoaded to be re-initialized each time.

This repeated check is not effective in preventing multiple API calls when $onInit is triggered.

Despite this problem, the API continues to be called every time $onInit runs during initialization.

How can I ensure that the call is only made once? It must still occur within $onInit.

javascript angularjs angular-promise

Answer 1

Answer №1

To optimize the API call, I recommend encapsulating it within a service structure similar to this:

(function (angular) {
    'use strict';

    angular
        .module('services.global')
        .service('TimeService', TimeService);

    TimeService.$inject = ['HttpHandler'];

    function TimeService(HttpHandler) {
        var timeService = this;
        var cachedResult = null;

        timeService.fetchTime = fetchTime;

        function fetchTime() {
            if (!cachedResult) {
                cachedResult = HttpHandler.send('/api/time/utc', {"method": 'GET'});
            }
            return cachedResult;
        }

        return timeService;
    }

})(angular);

Once you have defined and injected this service into your controller, make use of TimeService.fetchTime() in place of making direct API calls. This way, the API request will be made only once during the initial invocation of fetchTime(), storing the response in cachedResult for subsequent usage.

Answer 2

To optimize the API call, I recommend encapsulating it within a service structure similar to this:

(function (angular) {
    'use strict';

    angular
        .module('services.global')
        .service('TimeService', TimeService);

    TimeService.$inject = ['HttpHandler'];

    function TimeService(HttpHandler) {
        var timeService = this;
        var cachedResult = null;

        timeService.fetchTime = fetchTime;

        function fetchTime() {
            if (!cachedResult) {
                cachedResult = HttpHandler.send('/api/time/utc', {"method": 'GET'});
            }
            return cachedResult;
        }

        return timeService;
    }

})(angular);

Once you have defined and injected this service into your controller, make use of TimeService.fetchTime() in place of making direct API calls. This way, the API request will be made only once during the initial invocation of fetchTime(), storing the response in cachedResult for subsequent usage.

Answer 3

Answer №2

In the onInit function of the directive controller, there are callInProgress and resultsLoaded functions that will be generated every time the directive is used. For a similar functionality in the containing controller, utilizing a controller property would be the recommended approach. By using bindings, you can specify the controller property needed to maintain a sense of generality.

Answer 4

In the onInit function of the directive controller, there are callInProgress and resultsLoaded functions that will be generated every time the directive is used. For a similar functionality in the containing controller, utilizing a controller property would be the recommended approach. By using bindings, you can specify the controller property needed to maintain a sense of generality.

Ways to ensure a particular promise is executed only once in Angular 1.5 despite multiple calls to the onInit hook

Answer №1

Answer №2

Similar questions

Formatting text to automatically continue onto the next line without requiring scrolling through long blocks of

Trying to assign marker image dynamically through various database inquiries

Preserving state values with the useState hook throughout various function invocations

Is it possible to send emails from a local server to Gmail, Yahoo, or Rediff?

When an option is selected in one dropdown, a list is dynamically populated in another dropdown. However, the entire column then displays the selected row's options in a table format

Encountering issues with formData in nextjs 13 due to incorrect data type

Use AngularJS to display content if X is greater than Y and apply a specific class

What is the best way to show the current date and time in an Angular template while ensuring it stays up to

Exploring javascript Object iteration with arrays using Python

The error message "Client blackbox not found. undefined" was thrown by wweb.js while trying to retrieve client data from a Map

Creating UI Bootstrap dropdowns using ng-repeat on the fly

Is there a way for me to respond to an APNS push notification by executing a task specified in the payload?

Mastering asynchronous function handling in Node.js

How to Use AngularJS $http Mock Respond to Simulate a Response with a `location` Header?

Issue with React submit button for posting data is not functioning as intended

Is there a way to have the ng-option initialize with the selected object value?

What could be causing the catch() block to not execute in Objection.js queries, with the then() method always running and returning either 0 or 1 as a result?

Express JS causing NodeJS error | "Issue with setting headers: Unable to set headers after they have been sent to the client"

Mocking a promise rejection in Jest to ensure that the calling function properly handles rejections

Scaling a mesh and BufferGeometry vertices using THREE.OBJLoader