Avoiding nested promises in Angular

Question

I am storing multiple variables in device storage (NativeScript app) using Eddy's nativescript-secure-storage plugin.

Each call to store a value returns a promise:

this.secureStorage = new SecureStorage();
secureStorage.set({
  key: "foo",
  value: "val1"
}).then(
  function(success) {
    //move on to the next one.
});

After multiple values are stored, I need to navigate the app to the home view, but need to confirm the values were successfully stored first.

How can I avoid nesting these calls this (which does work but will not be pretty with many values):

this.secureStorage = new SecureStorage();
secureStorage.set({
  key: "foo1",
  value: "val1"
}).then(
  function(success) {
    secureStorage.set({
      key: "foo2",
      value: "val2"
  }).then(
    function(success) {
      secureStorage.set({
        key: "foo3",
        value: "val3"
    }).then(
       function(success) {
         //navigate to home view
    });
  });
});

@jonrsharpe Ah .... [like this](https://stackoverflow.com/questions/37841721/angular2-wait-for-multiple-promises-to-finish) — lilbiscuit, May 04 '18 at 20:01
@lilbiscuit As jonrsharpe said, build an array of promises, and call `Promise.all(myarray)`, which makes promises run in parallel. — Standaa - Remember Monica, May 04 '18 at 20:13
And if you need to know the result of any of the promises, you can enable async/await in NS apps seen here https://www.nativescript.org/blog/use-async-await-with-typescript-in-nativescript-today — Brad Martin, May 04 '18 at 21:36

score 2 · Answer 1 · answered May 04 '18 at 22:03

RezaRahmati's answer is solid.

Another way would be to convert the promises to observables.

import { fromPromise } from 'rxjs/observable/fromPromise';
import { mergeMap } from 'rxjs/operators';

const secureStorage = new SecureStorage();
const store = (key, value) => fromPromise(secureStorage.set({key, value}));

Here is the sequential store:

store('foo1', 'value1')
   .pipe(
       mergeMap(() => store('foo2', 'value2')),
       mergeMap(() => store('foo3', 'value3'))
   ).subscribe(
      () =>  {/* Handle success */ }, 
      err => {/* Handle error*/ }
   )

Or the equivelent of Promise.all(...):

forkJoin(
   store('foo1', 'value1'), 
   store('foo2', 'value2'), 
   store('foo3', 'value3')
).subscribe(
   ([foo1, foo2, foo3])=> { /* Success */ },
   err => { /* Error */ }
)

score 0 · Answer 2 · answered May 04 '18 at 20:48

You can use Promise.all([array of promises]) or using Typescript async/await

since you tag your question as Angular I assume you are using Typescript 1.7+, then you can use this way

async storedata() {

   this.secureStorage = new SecureStorage();

   try {
     await secureStorage.set({
        key: "foo1",
        value: "val1"
     });
     await secureStorage.set({
        key: "foo2",
        value: "val2"
     });
     await secureStorage.set({
        key: "foo3",
        value: "val3"
     });

    //navigate to home view

   } catch(err) {
       console.error(err);
   }
}

score 0 · Answer 3 · answered May 05 '18 at 13:46

Per @johnrsharpe:

Promise 
    .all( [
        this.secureStorage.set({
           key: "foo1",
           value: "value1"
        }),
        this.secureStorage.set({
           key: "foo2",
           value: "value2"
        }),
        this.secureStorage.set({
           key: "foo3",
           value: "value3"
        })
    ])
    .then(success => {
        //navigate to home view
    });

Avoiding nested promises in Angular

3 Answers3