Angular triggers a function upon completion of several API requests

Question

Angular triggers a function upon completion of several API requests

I am currently working on an Angular service that involves making HTTP calls. Here is an overview of the code structure:

this.checkAndSendNotifications = function() {
    UsersService.getArray(function(array) {
        var notifications = [];
        angular.forEach(array, function(element) {
            if (some conditions are met) {
                srv.sendNotificationToToken(element.id,
                    function() {
                        notifications.push({
                            id: user.id,
                            errorStatus: null,
                            errorStatusText: null
                        });
                    },
                    function(error) {
                        notifications.push({
                            id: user.id,
                            errorStatus: error.status,
                            errorStatusText: error.statusText
                        });
                    });
            }
        });
        printNotificationsStatus(notifications);
    });
};

this.sendNotificationToToken = function(id, onSuccess, onError) {
    $http({
        method: 'POST',
        url: 'https://url....',
        headers: {
            'Authorization': 'Bearer ....',
            'Content-Type': 'application/json'
        },
        data: {
            "id": id,
            "message": "hello"
        }
    }).then(function successCallback(response) {
        onSuccess();
    }, function errorCallback(error) {
        onError(error)
    });
};

I am facing a challenge where I need to ensure that the printNotificationsStatus() function is called only after all API calls are completed to guarantee that all API responses are received. Currently, the function is being called at the end of the angular.forEach execution, which could lead to asynchronous API promises being resolved later than expected.

Is there a solution to synchronize the API calls?

Thank you in advance, Davide

javascript angularjs api asynchronous promise

Answer 1

Answer №1

If you want to ensure all promises are resolved before proceeding, you can utilize $q.all. Here's an example implementation:

UsersService.getArray(function(array) {

    var promises = [];
    var notifications = [];
    angular.forEach(array, function(element) {

        if (some conditions are met) {
            var promise = srv.sendNotificationToToken(element.id,
                function() {
                    notifications.push({
                        id: user.id,
                        errorStatus: null,
                        errorStatusText: null
                    });
                },
                function(error) {
                    notifications.push({
                        id: user.id,
                        errorStatus: error.status,
                        errorStatusText: error.statusText
                    });
                });
            promises.push(promise);
        }

    });

    // Wait for all promises to resolve
    $q.all(promises).then(function () {
        printNotificationsStatus(notifications);    
    })

 });
};

Remember to inject $q into your code.

Ps: You should be careful not to execute printNotificationsStatus() after the first iteration in your code.

Answer 2

If you want to ensure all promises are resolved before proceeding, you can utilize $q.all. Here's an example implementation:

UsersService.getArray(function(array) {

    var promises = [];
    var notifications = [];
    angular.forEach(array, function(element) {

        if (some conditions are met) {
            var promise = srv.sendNotificationToToken(element.id,
                function() {
                    notifications.push({
                        id: user.id,
                        errorStatus: null,
                        errorStatusText: null
                    });
                },
                function(error) {
                    notifications.push({
                        id: user.id,
                        errorStatus: error.status,
                        errorStatusText: error.statusText
                    });
                });
            promises.push(promise);
        }

    });

    // Wait for all promises to resolve
    $q.all(promises).then(function () {
        printNotificationsStatus(notifications);    
    })

 });
};

Remember to inject $q into your code.

Ps: You should be careful not to execute printNotificationsStatus() after the first iteration in your code.

Answer 3

Answer №2

In analyzing your code, it first catches my attention that the printNotificationsStatus function is called within the forEach loop. This means it will be executed for each item in the array. If this was a synchronous process, it could have been placed outside the loop.

However, since you are making an asynchronous call within the forEach loop, the main thread will not wait for the responses from sendNotificationToToken.

There are several effective patterns to handle this kind of situation in JavaScript. One common approach, as suggested by @Bruno Pares, can be found here:

Using libraries like Async can also be a good option.

With the callbacks you are currently utilizing, you can refactor the code to keep track of the iteration process. Once all iterations are complete, you can then call the printNotificationsStatus function. The answer provided in the following link seems to address your specific query quite well:

function callback () { console.log('all done'); }

var itemsProcessed = 0;

[1, 2, 3].forEach((item, index, array) => {
  asyncFunction(item, () => {
    itemsProcessed++;
    if(itemsProcessed === array.length) {
      callback();
    }
  });
});

Answer 4

In analyzing your code, it first catches my attention that the printNotificationsStatus function is called within the forEach loop. This means it will be executed for each item in the array. If this was a synchronous process, it could have been placed outside the loop.

However, since you are making an asynchronous call within the forEach loop, the main thread will not wait for the responses from sendNotificationToToken.

There are several effective patterns to handle this kind of situation in JavaScript. One common approach, as suggested by @Bruno Pares, can be found here:

Using libraries like Async can also be a good option.

With the callbacks you are currently utilizing, you can refactor the code to keep track of the iteration process. Once all iterations are complete, you can then call the printNotificationsStatus function. The answer provided in the following link seems to address your specific query quite well:

function callback () { console.log('all done'); }

var itemsProcessed = 0;

[1, 2, 3].forEach((item, index, array) => {
  asyncFunction(item, () => {
    itemsProcessed++;
    if(itemsProcessed === array.length) {
      callback();
    }
  });
});

Angular triggers a function upon completion of several API requests

Answer №1

Answer №2

Similar questions

Using jQuery to retrieve the content of a textarea and display it

Tips for dynamically updating data with on.click functions in D3

Issue with AJAX POST request: PHP failing to establish session

Manipulating a 2D array in Javascript and Jquery: Implementing push functionality

Tips for transferring data between two forms in separate iFrames

I need to transfer the "message" variable from outside to inside the res.json function

Creating recursive functions to produce a unique variable without any repetitions

Sending a request from JavaScript to C# methods using AJAX, with no expected response, within an ASP.NET MVC framework

The method mongoose.connect() is not defined

Tips for calculating the distance from the cursor position to the visible area

The issue of the Ajax beforeSend function not triggering at times, causing a delay in displaying the bootstrap progress

Laravel: The current configuration does not support the experimental syntax 'classProperties' at this time

Having trouble setting the select value with JavaScript in the Selenium web driver

The functionality of Jquery .slideToggle("slow") seems to be glitchy when used as a table expander

The <base> tag functions properly when used with the <a href> attribute, but encounters issues when used with JavaScript's document

Merging object keys and values from JSON arrays based on their keys, using JavaScript

The jQuery .val(#) function does not update the selection after an AJAX call, but it functions correctly when debugging or paused

Inquiries about ngshow and the scope concept

Breaking down a javascript project

Discovering a specific element within a deeply nested JavaScript object