In my page there is a button that generates a report. That report needs data that is loaded using a http call to a rest endpoint when the page is loaded, but I do not have a guarantee that they are loaded when the user presses the report button.
How can I watch the observable to see if it is completed, and if incomplete, to wait on the action until the http call is completed? Here is some of the code:
loadCompanies(): void { this._companyService.getCompanies().subscribe( response => { this.companiesModel = response; }, err => console.log(err) ); }
generateReport() { // check if observable that loads companies is completed and do the // action using companiesModel. }
One option is a flag set in loading companies with values of 'loading' and 'completed', and make a wait in generateReport()
until the flag is completed, but I would prefer a solution using the Observable
API if possible.
The solution I came up with is to use a shared observable, save the request as a hot observable that way when the report button is clicked it will wait for the request or immediately generate if the request is complete.
takeUntil(end$); When you want to end observable , you do end$. onNext("anything you want here"); . That is in the case the ending event is generated by you.
The Observable Contract and Error Handling Network requests can fail, for example. A stream can also complete, which means that: the stream has ended its lifecycle without any error. after completion, the stream will not emit any further values.
Using pipe to combine operators The order of the operators is important because when a user subscribes to an observable, the pipe executes the operators in a sequence in which they are added. To use observable we need it to import from the rxjs library.
You can do this by using onCompleted
callback in subscription
. For example, let's say you show loading bar when user press report button;
loadCompanies(): void { this._companyService.getCompanies().subscribe( response => { this.companiesModel = response; }, err => { console.log(err); //closeLoadingBar(); }, () => { //do whatever you want //closeLoadingBar() } ) } generateReport() { //showLoadingBar() this.loadCompanies(); }
If you get error from your http call, onCompleted
method will not be invoked, only onError
will be invoked. If it is successful, onCompleted
method will be called after your onNext
method.
Here is the documentation for subscribe. I hope it helps!
One more solution:
Actually subscribe function takes three parameters:
onNext onError onCompleted
this._companyService.getCompanies().subscribe( (response) => { this.companiesModel = response; }, (err) => { console.log(err) }, (finally) => { console.log('finally') } );
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With