toy toy - 29 days ago 9
Javascript Question

How do I wait until all the Promises are fulfilled in RxJS?

I have a list of Promises that I want to get the result and display on the page.

let directives = ['object-src', 'img-src', 'media-src', 'script-src', 'style-src', 'frame-src', 'child-src'];

let directivesStream = Rx.Observable.from(directives)
.map((d) => {
let q = getSummaryCSP({
origin: origin,
directive: d,
from: moment().subtract(3, 'days').utc().format(),
to: moment().utc().format()
});

return Rx.Observable.interval(10000)
.flatMap(() => Rx.Observable.fromPromise(queries.query(q)));
});

directivesStream.mergeAll().subscribe((response) => {
let flattenedRes = _.sortBy(response.data, (e) => e.event.count);
flattenedRes = _.reverse(flattenedRes);
this.setState({
cspReport: flattenedRes
});
});


So what it's doing is it creates a stream of Promises with interval of
10000
. However, the end result is the combined results of all the promises that's why I'm doing
sorting
and
reversing
and then display the result in React.

I know that everything in RxJs is a stream. So, I'm not sure if I can achieve this at all?

So, my question is how do I create a stream of Promises that at the end 10s, all the streams have to be merged into one stream so I can use the result of all the promises.

Answer

Not sure if I understand your question well, but here are a few pointers for you to investigate:

  • toArray operator : allow to gather all emissions of a streams into an array
  • forkJoin operator : equivalent to Promise.all, runs all promises in parallel and gather all results

I am confident that with one of those two you can achieve your goal. I let you figure out which as trying to solve a problem by oneself is the best way to get a good understanding of Rxjs. You can in addition find a list of operators here. I recommend you to have a look before posting a question.

Comments