How to chain 3 Promises with angular2 and typescript

Question

I have successfully chained promises, but I find the way I did it enough complicated: I'm wondering if there is not a more elegant way to do it.

I use Angular2, Typescript and signalR.

I have a service getIntervention that returns an object from the server by Id.

Before calling getIntervention, I want to check the client to be connected to the server, and before connecting to the server, I want the SignalR scripts to be loaded.

So I created a first promise scriptLoadedPromise that waits for the SignalR script to be loaded. When scriptLoadedPromise is resolved a new promise connectionPromise is created that waits for the connection to be established.

When connectionPromise is resolved, call the service getIntervention.

For each promise I added callbacks named scriptLoaded and connectionDetected that call resolve().

Here is my code:

public loadIntervention( numFI : number ) : Promise<Intervention>
{

    let scriptLoadedPromise : Promise<Intervention> = new Promise( ( resolve, reject ) =>
    { 
        // si le script est chargé alors la promesse est déjà tenue
        if ( this.isScriptLoaded )
            resolve();
        else
            this.scriptLoaded = ( () => { resolve(); } ) ;
    }).then
    ( () => {
        let connectionPromise : Promise<Intervention> = new Promise( (resolve, reject) =>
        {
            // si le serveur est connecté alors la promesse de connection est déjà tenue
            if ( this.Connected )
                resolve();
            else
                this.connectionDetected = ( () => { console.log("RECONNETED !!!!!"); resolve(); } );

        } )
        .then( ()  => { return this.proxy.server.getIntervention( numFI ); } );

        return connectionPromise;
    });


    return scriptLoadedPromise;
}

Is there a way to simplify that implementation where 3 promises are chained ?

Oliver Hader · Answer 1 · 2023-01-12T16:16:41.030

10

If these promises depend on each other, it's similar to what you created already. You could enhance the code-style of that, by putting the logic into separate methods like e.g.

private firstAction():Promise<any> {
  return new Promise<any>(
    (resolve, reject) => { ... }
  );
}
private secondAction():Promise<any> {
  return new Promise<any>(
    (resolve, reject) => { ... }
  );
}
execute() {
  this.firstAction().then(
    (firstResult:any) => this.secondAction().then(
      (secondResult:any) => { ... }
    );
  )
}

If it's allowed that the promises are executed in parallel, you can make use of Promise.all(), like e.g.

execute() {
  let promises:Promise<any>[] = [];
  promises.push(this.firstAction());
  promises.push(this.secondAction());

  Promise.all(promises).then(
    () => { ... }
  );
}

edited Jan 12 '23 at 16:16

answered Dec 23 '16 at 12:05

Oliver Hader

4,093
1
25
47

Thank you, another question: do I really need to use callbacks to resolve theses promises ? – Anthony Brenelière Dec 23 '16 at 13:52
I was just thinking I may add created promises as private members, and resolve them explicitly when connection is established. – Anthony Brenelière Dec 23 '16 at 13:54
1

(reject, resolve) => { ... } needs to be (resolve, reject) => { ... } – Seb Aug 22 '17 at 13:31
1

Thx @Seb, `(resolve, reject)` is of course the proper order of `Promise` arguments – Oliver Hader Aug 23 '17 at 09:23
1

These promises are not chained, they are nested, which defeats the purpose of promises and is an anti-pattern. – Greg Jan 04 '23 at 09:08
@Greg What's your point? What would you suggest instead? Do you have any references/links/docs for your statement? Thx! – Oliver Hader Jan 06 '23 at 20:38
@OliverHader [Aren't promises just callbacks?](https://stackoverflow.com/q/22539815) - nesting the promises is indeed a misuse. There is no real need to reinvent [callback hell](http://callbackhell.com/) which promises were the answer to. That's why they automatically flatten, so you don't have to do `p1().then(r1 => p2().then(r2 => p3().then( /* ... */)))` but instead just have the more natural and easy to work with `p1().then(r1 => p2()).then(r2 => p3()).then(/* ... */)` Nesting is only useful if you want to use two results at once but usually it's possible to spread to the `.then()` chain. – VLAZ Jan 12 '23 at 16:37
Anybody, please go ahead an provide a new answer. Mine was from 2016, now it's 2023... – Oliver Hader Jan 13 '23 at 11:12
I provided the correct answer, but it was undone. – Greg Jan 19 '23 at 02:27

How to chain 3 Promises with angular2 and typescript

1 Answers1