Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular2. How can I check if an observable is completed?

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.

like image 992
csm86 Avatar asked Jul 11 '17 10:07

csm86


People also ask

How do you know when an observable is complete?

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.

How do you finish observable?

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.

Does observable complete after error?

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.

Does pipe execute observable?

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.


2 Answers

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!

like image 70
ulubeyn Avatar answered Sep 20 '22 16:09

ulubeyn


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') } ); 
like image 41
Valery Lyatsevich Avatar answered Sep 17 '22 16:09

Valery Lyatsevich