CODEWITHSUNDEEP
angulartypescript
dlugasnyy
dlugasnyy

Reputation: 5

How to stop subscribe in case of http error

I'm looking for an idea how to stop subsribing in any method when Interceptor throws a HttpError. In my Angular app there are few components that download data from backend using something like this:

    getItems(){
this.isProcessing = true;
this.itemsService.getItems().subscribe((x) => {
this.itemList = x;
this.isProcessing = false;
});
}

When request for data starts then isProcessing is set to true and spinner starts goind round. After data received it stops. Every single http request goes through HttpInterceptor which adds token to request and has error handler in case of any http eror. When user doesn't have permission to download some data, the error 403 comes from backend. What I'm trying to do is to show modal with some information, stop subscribing in method in any component that made that request and set isSpinning to false like nothing hapenned. Should I create some observable in Interceptor and use it in every method to tell whether to stop subsribe or not?

Upvotes: 0

Views: 1542

Answers (3)

Benzara Tahar
Benzara Tahar

Reputation: 2217

you need to use the error callback but that only works if you do not capture the error in your interceptor

getItems(){
  this.isProcessing = true;
  this.itemsService.getItems().subscribe(
    (x) => {
      this.itemList = x;
      this.isProcessing = false;
    },
    (error) => { this.isProcessing = false; }
   }
  );
}

so you either capture the error in your interceptor (for logging purposes or any other logic) and throw it back, or you do not capture it at all.

Upvotes: 1

A.khalifa
A.khalifa

Reputation: 2496

Try this

getItems(){
    this.isProcessing = true;
    this.itemsService.getItems().subscribe((x) => {
    if(x !=null || x != undefined) {
      this.itemList = x;
       this.isProcessing = false;
    } 
  else {
    this.isProcessing = false;
  }
  });

Upvotes: 0

Harun Yilmaz
Harun Yilmaz

Reputation: 8558

You can use error callback of subscribe() method as followings:

getItems(){
  this.isProcessing = true;
  this.itemsService.getItems().subscribe(
    (x) => {
      this.itemList = x;
      this.isProcessing = false;
    },
    (error) => {
      // Create your modal here
      this.isProcessing = false;
    }
  );
}

For reference: https://rxjs-dev.firebaseapp.com/guide/observable

Upvotes: 0

Related Questions