Angular2 wait for multiple promises to finish

Question

I am using the SQLStorage from the Ionic platform. The remove function returns a promise. In my code I need to remove multiple values. When these are all finished I need to execute some code.

How can I wait for all of these and then execute a callback function?

Code:

removeAll() {

  this.storage.remove(key1);
  this.storage.remove(key2);
  this.storage.remove(key3);

}

Nesting all is a bad practise so I am looking for a decent solution :)

removeAll() {

  return this.storage.remove(key1).then(() => {

    this.storage.remove(key2).then(() => {

      this.storage.remove(key3);

    });

  });

};

Answer 1

On rxjs version > 6 You can do something like this:

import {forkJoin} from 'rxjs';

and do instead of Observable.forkJoin this:

forkJoin([
  this.service1.get(),
  this.service2.get()
]).subscribe(data => {
  this.data1= data[0];
  this.data2 = data[1];

Answer 2

You can use

removeAll() {
  Promise.all([
    this.storage.remove(key1),
    this.storage.remove(key2),
    this.storage.remove(key3),
  ]).then(value => doSomething());

See also https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

Answer 3

Use Promise.all():

The Promise.all(iterable) method returns a promise that resolves when all of the promises in the iterable argument have resolved, or rejects with the reason of the first passed promise that rejects.

Syntax

Promise.all(iterable);

Parameters

iterable

An iterable object, such as an Array. See iterable.

Answer 4

You could use Observable.forkJoin from rxjs by providing an array of all the observables/promises. This needs to be done before performing the operation. It's similar to Angular 1's $q.all.

Observable.forkJoin([
   this.storage.remove(key1), 
   this.storage.remove(key2),
   this.storage.remove(key3)
])
.subscribe(t=> {
    var firstResult = t[0];
    var secondResult = t[1];
});

Answer 5

use Promise.all for Promisses and Observable.forkJoin for Observables

as the question is about angular(2+) and you problably should have been using Observable instead of promises. i`ll add a GET example that worked for me:

import {Observable} from 'rxjs/Rx';

Observable.forkJoin(
      this._dataService.getOne().map(one => this.one =one),
      this._dataService.getTwo().map(two => this.two two),
      this._dataService.getN().map(n => this.n = n),
     )
    ).subscribe(res => this.doSomethingElse(this.one, this.two, this.n)); 

note the use one .map() to handle the response rather than .subscribe()

Answer 6

I'm not familiar with IONIC, but assuming that storage.remove is returning a promise I would suggest you to use forkJoin operator from observables.

ForJoin takes an array of observables and awaits the execution of all items.

Just notice that I had to create 3 new observables from each promise return by the .remove method.

Observable.forkJoin([
   Observable.fromPromise(this.storage.remove(key1)), 
   Observable.fromPromise(this.storage.remove(key2)),
   Observable.fromPromise(this.storage.remove(key3))
])
.subscribe(data => {
    console.log(data[0]);
    console.log(data[1]);
    console.log(data[2]);
});