finally block in angular 2 promise

Question

I observe that In angular 2 there is no finally block for promise API

angular 1 :

 loadUsers() {
  fetch('/api/users').then((response) => {
    return response.json();
  }).then((data) => {
    this.users = data;
  }).catch((ex) => {
    console.error('Error fetching users', ex);
  }).finally(() => {
     this.userLoaded = true;
};

Assuming I have to do same thing in angular 2

How to add finally block in angular 2 promise , as of now there are only then & catch blocks available in angular 2. If not finally then is there any way to add cleanup code after execution of each method , where do i write code to do finally block activities ?

Answer 1

The easiest way to do this is to use the promise.finally shim.

• Add it with npm install --save promise.prototype.finally
• Add the typings: npm install --save-dev @types/promise.prototype.finally
• In your main class, before bootstrapping the application, add the following code:

import { shim } from 'promise.prototype.finally';
shim();

You should now be able to use finally on your promises.

Answer 2

This is usually done using Promise.always. This takes one function, and adds a new .then on the promise that gives the same function for both success and fail states. If the function is not available in the given promise-based environment, it's pretty easy to polyfill in.

Promise.always = function(p, fn) {
  return p.then(fn, fn);
}

usage:

var prom = fetch('/api/users').then...
Promise.always(prom, () => {
  this.userLoaded = true;
});
return prom;

Answer 3

Modern solution in 2019-2020

First of all, you should avoid manually adding polyfills without a good reason for it, don't do it blindly because you've read it somewhere.

The problem you encounter has two sides: typing declarations and the implementation.

In order to use Promise.finally in your code without typing errors you should add es2018.promise to the lib option in your tsconfig.json file.

For modern projects you should use the following configuration (which is default in Angular 8):

{
  "compilerOptions": {
    …
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

This will fix the typing errors you have in the editor.

Also, according to the docs and my observations the correct polyfill for Promise.finally will be added by the Angular compiler automatically, you don't have to install or add anything.

But, in general, you could add a polyfill (only if it is proven to be required) in ./src/polyfills.ts file using core-js library. Always try to use core-js instead of other libraries, cause it's an industry standard and it's used by Angular internally.

For example, Promise.finally polyfill could be added like this:

import 'core-js/features/promise/finally';

---

See more at core-js documentation.

Also, make sure to read browser-support and differential-loading articles of Angular documentation.