how to know when all promises are resolved while using multiple promises

I'm making an angular app with node.js. I want to wait for all the promises to resolve, then do some working. My code looks like:

myComponent.ts

this.myService.loadData(param).then((response) =>
console.log("loaded");
// raise a flag here. all promises are resolved.
);


myService.ts

public loadData(param): Promise <any>
return new Promise((resolve, reject) =>
this.loadMoreData(param).then((data) =>
resolve("data loaded");
);
);


public loadMoreData(param): Promise <any>
return new Promise((resolve, reject) =>
this.loadSomeMoreData(param).then(() =>
resolve("more data loaded");
);
);


public loadSomeMoreData(param): Promise <any>
this.loadSomeMoreData(param).then(() =>
this.loadSomeMoreMoreData(param).then(() =>
resolve("more data loaded");
);
);


...
And So on like this.


My code looks like above chaining. Actually, I have separated each task in the separate function and I have to know when each task is completed. And overall it should tell me in myComponent.ts that all promises are resolved.
I have also tried

myComponent.ts

Promise.all([promise1, promise2, promise3]).then(function(values)
console.log(values);
);


But as you can see all my promises are in separate service and being called upon the output returned by previous promise. so I can't get all of them resolved in myComponent.ts.
Any help will be highly appreciated. Thanks

myComponent.ts

return

resolve

new Promise

3 Answers
3

You can return promises from your services like

public loadData(param): Promise <any>
return this.loadMoreData(param);


public loadMoreData(param): Promise <any>
return this.loadSomeMoreData(param);


public loadSomeMoreData(param): Promise <any>
return this.loadSomeMoreData(param);



and in this call you can just add catch or reject block

catch

reject

this.myService.loadData(param).then((response) =>
console.log("loaded");
// raise a flag here. all promises are resolved.
).catch(...);


If the flow is not go into the catch means that your promises were resolved and everything is OK.

catch

You already wrapped every next async call into new Promise and resolve it after inner request ends up, so your promise chain is actually ready, all you need is just to call loadData method, and then block inside this method fill be fired only after loadSomeMoreMoreData response is got, so looks like this behavior is what you're looking for.

new Promise

resolve

loadData

then

loadSomeMoreMoreData

PS: You also forgot to return a Promise in loadSomeMoreData method.

Promise

loadSomeMoreData

new Promise

The other solution that seems to match more your expectation is the following:

//this is in a Service1
public loadData1(param): Promise <any>
return asyncMethod1(param); //this return a promise


//this is in a Service2
public loadData2(data1): Promise <any>
return asyncMethod2(data1); //this return a promise


//this is in a Service3
public loadData3(data2): Promise <any>
return asyncMethod3(data2); //this return a promise


etc...


in your component:

let data1$=Observable.fromPromise(Service1.loadData1(xxx));
let data2$=data1$.flatMap(Service2.loadData2),
let data3$=data2$.flatMap(Service3.loadData3),
data3$.subscribe(result=>/*use the final result*/);


Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.