javascriptangularjsangularjs-resource

How store AngularJS $resource calls in an array to execute all together after?


I'm working with AngularJS 1.5 (I'm really beginner with JS) in a user profile view where the user can change a lot of things in his data.

In this view the data is split in several sections and save all of this data means to do several calls to server ( due to the design of app). So the problem that I found is that when the user modify his data maybe modify only a part of this and when it push save button I don't want call all methods, only to necessary methods.

I've programed the way to detect the changes in data blocks when the user push the save button, sometimes the controller make a call and in other cases two or three. But the problem is that the calls (made with $resource library) is executed asyncronously and I would like can control this better.

I would like do the next: store all calls in a list or array but wihout execute them and after execute all at the same time (more or less). If any of this fails I would like show a error message to user (only a generic error message), but internally log the call that failed, and in the same way only show (and only one) a success message when all calls have ended with success ( and not a message per success call).

I don't know how to do this, some mates say me that maybe I need use $q AngularJS service to do this, or store the promises that $resource have to execute all after (I've trying this without success) or work with promises in JS.

Anyone can give me any idea?


Solution

  • Finally I resolved my problem using $q. At first I wanted store the calls without execute them (I thought that it was better) but finally I can check that only stored the results of this calls is enought for my aim. So, this a skeleton of the solution that I've been done:

    At the beginning of the controller

    var promises = [];
    

    In all places where I need make a controlled call inside of save user data function:

    var deferred = $q.defer();
    
    var promise = vm.teacher.$update(
        function () { // Success
            deferred.resolve('Success updating the teacher.');
        },
        function (error) { // Fail
            deferred.reject('Error updating the teacher, error: ' + error)
        });
    promises.push(deferred.promise)
    }
    
    ...
    
    ... vm.otherItems.$update ... 
    
    ...
    

    And at the end of this function, something like this:

    $q.all(promises).then(
    
        function(value){
            console.log('Resolving all promises, SUCCESS,  value: ')
            console.log(value);
            toastService.showToast('Success updating the teacher.');
    
            // It deleted old promises for next iteration (if it exists)                
            promises = [];
    
        },function(reason){
            console.log('Resolving all promises, FAIL, reason: ')
            console.log(reason);
            toastService.showToast('Fail updating the teacher.');
        }
    )
    

    Thanks for the help!