CODEWITHSUNDEEP
javascriptangularjsasynchronousangular-promise
Reinis
Reinis

Reputation: 136

angularJS $q -- stopping execution to wait for all promises

I've got this problem that I couldn't find a solution for by googling.

I've got a library, that I'm using (and do not want to edit, unless it's really necessary) that allows the user to select an item, then calls my custom callback function to modify the item and then continues working with it.

I need to perform some asynchronous tasks on it, which may take some time. This creates a race condition as my async tasks have not yet finished when the callback function is finished and the library continues its work on the item.

library.onItemSelectionCallback = function (item) {

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

How do I wait for both of my async tasks to finish, before allowing this callback to finish?

Only thing I could think of is looping with while and sleep every hundred or so milliseconds until both of the promises have been resolved, but that doesn't seem to be a very good solution.

I understand that this makes async requests quite synchronous and might possibly be detrimental for UX, but do not really see another way out.

EDIT: I know that i'm risking with removing the generic nature of the question and thus making it too localized, I will say that I'm trying to use angular-file-upload module, specifically, trying to mount a custom imageService, that would resize the picture before it's upload. I'm mounting it on the onBeforeUploadItem callback. The idea is that creating the resized image may take a while and that is why I need to return a promise from my imageService, that needs to be resolved before upload.

Upvotes: 2

Views: 2672

Answers (2)

Reinis
Reinis

Reputation: 136

For the first part of my question -- Yes, I guess the only way to really wait for those two promises to be resolved would be something with a while and sleep, making them synchronous, which would probably work and not even be that bad (except for the site pausing until the requests are fulfilled), but would make me feel very, very bad about myself as a person and how my actions affect this world.

It is not possible to correctly mix callbacks and promises without hacks afaik.

For the second part of my question -- as per comments of @georgeawg, figured that an AngularJS module that implements HTML5 API and callbacks instead of $http service and promises is not how a good AngularJS module should be implemented, and so I moved towards a different module ng-file-upload, which, even though one could argue is less stylish, does the job very well and in an Angular way (ng-file-upload provides a simple $upload service, that returns a promise. If you want to modify files before upload, suggested way is to simply $watch and catch the moment user drag-drops or selects a file.).

Upvotes: 1

Phil
Phil

Reputation: 164795

If modifyItem and anotherModifyItem work independently (that is, one does not rely on the other), you can just pipe them both into $q.all, eg

library.onItemSelectionCallback = function(item) {
    var promises = {
        newProperty: myService.modifyItem(item),
        existingProperty: myService.anotherModifyItem(item)
    };

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

This will return a promise that resolves with item.

Upvotes: 3

Related Questions