Ways to ensure certain code is executed every time a promise is resolved in Angular.js

Question

Ways to ensure certain code is executed every time a promise is resolved in Angular.js

Within my Angular.js application, I am executing an asynchronous operation. To ensure a smooth user experience, I cover the application with a modal div before initiating the operation. Once the operation is complete, regardless of its outcome, I need to remove the div.

Currently, my implementation looks like this:

LoadingOverlay.start(); 
Auth.initialize().then(function() {
    LoadingOverlay.stop();
}, function() {
    LoadingOverlay.stop(); // Duplication of code
})

While this method works effectively, I would prefer a cleaner approach akin to the following pseudo-code:

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

I suspect that this is a common issue, but I have been unable to find any relevant information in the documentation. Is it possible to achieve this? Any suggestions would be greatly appreciated.

javascript angularjs promise deferred finally

Answer 1

Answer №1

The new functionality has been successfully integrated into AngularJS through this specific pull request. Originally named "always," it was eventually changed to finally. Here is an example of how the code should be structured:

LoadingOverlay.start(); 
Auth.initialize().then(function() {
    // This function handles success
}, function() {
    // This function handles errors
}).finally(function() {
    // This section always runs, regardless of success or failure
});

It's important to note that because finally is a reserved word, in some browsers like IE and Android Browser, you may need to treat it as a string to prevent issues:

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

Answer 2

The new functionality has been successfully integrated into AngularJS through this specific pull request. Originally named "always," it was eventually changed to finally. Here is an example of how the code should be structured:

LoadingOverlay.start(); 
Auth.initialize().then(function() {
    // This function handles success
}, function() {
    // This function handles errors
}).finally(function() {
    // This section always runs, regardless of success or failure
});

It's important to note that because finally is a reserved word, in some browsers like IE and Android Browser, you may need to treat it as a string to prevent issues:

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

Answer 3

Answer №2

After encountering an error while using Umbraco version 7.3.5 back end and AngularJS version 1.1.5, I came across this helpful thread. When I tried the suggested solution, I received the following error message:

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

Fortunately, I found that replacing finally with always did the trick. In case anyone else running an older version of AngularJS stumbles upon this issue and cannot utilize finally, they can use the following code instead:

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

Answer 4

After encountering an error while using Umbraco version 7.3.5 back end and AngularJS version 1.1.5, I came across this helpful thread. When I tried the suggested solution, I received the following error message:

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

Fortunately, I found that replacing finally with always did the trick. In case anyone else running an older version of AngularJS stumbles upon this issue and cannot utilize finally, they can use the following code instead:

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

Answer 5

Answer №3

If you are not utilizing angularJS and are comfortable with handling errors, you can make use of .catch().then() to prevent redundant code repetition.

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

The catch() method could still be beneficial for logging or performing other cleanup tasks. https://jsfiddle.net/pointzerotwo/k4rb41a7/

Answer 6

If you are not utilizing angularJS and are comfortable with handling errors, you can make use of .catch().then() to prevent redundant code repetition.

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

The catch() method could still be beneficial for logging or performing other cleanup tasks. https://jsfiddle.net/pointzerotwo/k4rb41a7/

Answer 7

Answer №4

To display the page's content and close your modal, I suggest utilizing ngView and triggering the modal removal upon the $viewContentLoaded event. For more information on this event, refer to http://docs.angularjs.org/api/ng.directive:ngView. You can also check out http://docs.angularjs.org/api/ng.$rootScope.Scope for details on the $on event listener.

Answer 8

To display the page's content and close your modal, I suggest utilizing ngView and triggering the modal removal upon the $viewContentLoaded event. For more information on this event, refer to http://docs.angularjs.org/api/ng.directive:ngView. You can also check out http://docs.angularjs.org/api/ng.$rootScope.Scope for details on the $on event listener.

Ways to ensure certain code is executed every time a promise is resolved in Angular.js

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Node.js program closes immediately upon Java startup

The FetchStrategy.FromLocalCache in BreezeJS isn't working as expected and not returning

Tips on comparing a string against an object's value

Leveraging npm packages within a Meteor project through cosmos:browserify

The functionality of Node.js's hasOwnProperty method fails to return true even for existing properties

Finding the Ideal Location for Controllers in an Express.js Project

The Jquery append function is limited to the initial ajax request, necessitating a page refresh in order to populate another div with the desired

How to Use Nested Rows with ng-repeat in Angular?

Tips for preserving updates following modifications in Angular 5/6?

What are the ways to activate an element in vue js?

Leveraging AJAX for database variable checks and PHP and JavaScript to redirect to specific pages based on the results

When attempting to compile Angular in production mode, errors may arise such as the Uncaught SyntaxError caused by an Unexpected token '<'

F# Using Ajax Post with JQuery

Tips for keeping the Menu bar at the top of the page while scrolling from the middle

Creating a regular expression to capture a numerical value enclosed by different characters:

The method for retrieving values and $id from a $firebaseArray using angularJS

Make sure the inputs in separate table data cells are lined up in

What can possibly be the reason why the HttpClient in Angular 5 is not functioning properly

Optimizing SEO with asynchronous image loading

What is causing the ajax code to malfunction?