Search code examples
javascriptangularjspromisedeferredfinally

How to always run some code when a promise is fulfilled in Angular.js

In my Angular.js application, I'm running some asynchronous operation. Before it starts I cover the application with a modal div, then once the operation is complete, I need to remove the div, whether the operation was successful or not.

Currently I have this:

LoadingOverlay.start(); 
Auth.initialize().then(function() {
    LoadingOverlay.stop();
}, function() {
    LoadingOverlay.stop(); // Code needs to be duplicated here
})

It works well, however I would prefer to have something cleaner like this pseudo-code:

LoadingOverlay.start(); 
Auth.initialize().finally(function() { // *pseudo-code* - some function that is always executed on both failure and success.
    LoadingOverlay.stop();
})

I assume it's quite a common problem, so I was thinking it could be done but cannot find anything in the doc. Any idea if it can be done?

Solution

  • The feature has been implemented in this pull request and is now part of AngularJS. It was initially called "always" and then later renamed to finally, so the code should be as follow:

    LoadingOverlay.start(); 
Auth.initialize().then(function() {
    // Success handler
}, function() {
    // Error handler
}).finally(function() {
    // Always execute this on both error and success
});

    Note that since finally is a reserved keyword, it might be necessary to make it a string so that it doesn't break on certain browsers (such as IE and Android Browser):

    $http.get('/foo')['finally'](doSomething);