AngularJS $q - pausing execution to synchronize all promises

Question

AngularJS $q - pausing execution to synchronize all promises

I've encountered a challenge that I haven't been able to solve through online searches.

In my project, I am using a library for selecting items and performing custom modifications through callback functions. However, I need to execute some asynchronous tasks on the selected item, which is causing a race condition as the async tasks are not completed by the time the callback function finishes.

library.onItemSelectionCallback = function (item) {

    myService.modifyItem(item).then(
        function (modifiedItemProperty) {
            item.newProperty = modifiedItemProperty;
        });
    myService.anotherModifyItem(item).then(
        function (modifiedItemProperty) {
            item.existingProperty = modifiedItemProperty;
        });
}

How can I ensure both async tasks are completed before allowing the callback to finish?

The only solution I could think of involved looping with while and sleeping at intervals until both promises have resolved, but this approach doesn't seem ideal.

I realize that making async requests synchronous may impact user experience, but I'm struggling to find an alternative.

EDIT: I do acknowledge the risk of making the question too specific, but I am attempting to integrate the angular-file-upload module into my project. Specifically, I'm looking to implement a custom imageService for resizing images before uploading them. This service is being mounted in the onBeforeUploadItem callback. The image resizing process may be time-consuming, hence the need for a promise to resolve before upload.

javascript angularjs asynchronous angular-promise

Answer 1

Answer №1

In case adjustItem and alternateAdjustItem function on their own (meaning, one does not depend on the other), you can simply combine them using $q.all, like so:

widget.onItemSelected = function(item) {
    var promises = {
        updatedProperty: myModule.adjustItem(item),
        existingProperty: myModule.alternateAdjustItem(item)
    };

    return $q.all(promises).then(function(values) {
        return angular.extend(item, values);
    });
}

This approach will result in a promise that resolves with item.

Answer 2

In case adjustItem and alternateAdjustItem function on their own (meaning, one does not depend on the other), you can simply combine them using $q.all, like so:

widget.onItemSelected = function(item) {
    var promises = {
        updatedProperty: myModule.adjustItem(item),
        existingProperty: myModule.alternateAdjustItem(item)
    };

    return $q.all(promises).then(function(values) {
        return angular.extend(item, values);
    });
}

This approach will result in a promise that resolves with item.

Answer 3

Answer №2

In addressing the initial query, it appears that employing a combination of a while loop and the sleep function would ensure synchronization while waiting for the resolution of two promises. Although this approach could potentially be effective, it may lead to an undesirable consequence such as site latency during the fulfillment of requests. However, adopting such a method could raise personal concerns about ethical implications and one's impact on the world.

It seems challenging to seamlessly integrate callbacks and promises without resorting to unconventional tactics based on current knowledge.

Regarding the subsequent inquiry, following insights from @georgeawg, it was recognized that constructing an AngularJS module utilizing HTML5 API with callbacks instead of the $http service and promises might not align with best practices. Consequently, a pivot was made towards utilizing a different module like ng-file-upload. Despite potential debates over its aesthetics, this alternative effectively accomplishes tasks within the Angular framework (ng-file-upload introduces a straightforward $upload service that returns a promise. Users can customize file uploads by monitoring user actions when dragging and dropping or selecting files).

Answer 4

In addressing the initial query, it appears that employing a combination of a while loop and the sleep function would ensure synchronization while waiting for the resolution of two promises. Although this approach could potentially be effective, it may lead to an undesirable consequence such as site latency during the fulfillment of requests. However, adopting such a method could raise personal concerns about ethical implications and one's impact on the world.

It seems challenging to seamlessly integrate callbacks and promises without resorting to unconventional tactics based on current knowledge.

Regarding the subsequent inquiry, following insights from @georgeawg, it was recognized that constructing an AngularJS module utilizing HTML5 API with callbacks instead of the $http service and promises might not align with best practices. Consequently, a pivot was made towards utilizing a different module like ng-file-upload. Despite potential debates over its aesthetics, this alternative effectively accomplishes tasks within the Angular framework (ng-file-upload introduces a straightforward $upload service that returns a promise. Users can customize file uploads by monitoring user actions when dragging and dropping or selecting files).

AngularJS $q - pausing execution to synchronize all promises

Answer №1

Answer №2

Similar questions

Updating JSON in JavaScript

Troubles with creating promises in Node.js

Unable to display modal pop-up in ASP.NET Core MVC web application

Tips for utilizing a variable selector with jQuery's .attr() method

Is npm installation specifically for a node server?

Ways to showcase the object on the console

I want to create a feature in Angular where a specific header becomes sticky based on the user's scroll position on the

Dynamic resizing in NextJs does not trigger a re-render

Different ways to generate DOM element using jQuery

Automatically inserting a row into an HTML table

Checking for correct format of date in DD/MM/YYYY using javascript

Guide on sending several HTTP requests from a Node.js server with a shared callback function

Custom AngularJS menu directive using a JSON file to generate submenus

Guide on Implementing jQuery Plugin with Vue, Webpack, and Typescript

What enables typescript to be eligible for transpiling is its equivalent level of abstraction to javascript?

Ways to retrieve all elements based on their class names?

Transforming an HTML file into a Vue.js component

Angular - Unable to access property '$invalid' because it is null

Integrating node.js into my HTML page

The project is not being recognized by 'webpack' when running within it