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

Question

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?

Answer 1

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);

Answer 2

I'm using Umbraco version 7.3.5 back end with AngularJS version 1.1.5 and found this thread. When I implemented the approved answer I got the error:

xxx(...).then(...).finally is not a function

What did work however was always. If anyone else using an old version of AngularJS finds this thread and can't use finally use this code instead

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

Answer 3

For those not using angularJS, and if you're ok with catching the error (not sure if .finally() would do that), you could use .catch().then() to avoid the duplicated code.

Promise.resolve()
  .catch(() => {})
  .then(() => console.log('finally'));

The catch() might end up being useful anyway for logging or other cleanup. https://jsfiddle.net/pointzerotwo/k4rb41a7/

Answer 4

I would use ngView to render the content of the page and trigger the removal of you modal on the event $viewContentLoaded. See http://docs.angularjs.org/api/ng.directive:ngView for that event and http://docs.angularjs.org/api/ng.$rootScope.Scope for the $on event listener.