how to catch error when api call fails in angular 2

Question

I'm developing an app that scans qr codes. I have a service dedicated to the scanner device where I get the data scanned.

this.dataWedge.scanResult$
      .pipe(
        tap(_ => (this.scanning = false)),
        filter(_ => this.assignState.getAssign() === this.assignState.Default),
        switchMap(scanData =>
          this.api.callApi(
            PurchaseOrderQuery,
            {
              DataString: scanData.DataString
            }
          )
        )
      )
      .subscribe(purchaseOrder => {
        this.scannedResult$.next(purchaseOrder);
      });

The problem is that when I pass a datastring that doesn't exist in the database, the api call fails (as it should be), but it never goes in the subscribe. How can I catch the error response from the api when this fails? Is it because of the switchMap maybe?

You need to use catchError after switchMap.

martin
– martin

2019-04-02 10:46:03 +00:00
Commented Apr 2, 2019 at 10:46 — martin
– martin, Commented Apr 2, 2019 at 10:46

user4676340 · Accepted Answer · 2019-04-02 10:46:43Z

1

Subscriptions have three callbacks :

xxx().subscribe(
  response => { ... }, // Request completed
  error => { ... }, // Request error
  () => { ... }, // Triggered in any case (like a "finally" from a try-catch block)
);

This is how you manage errors.

You can also keep your stream going with catchError :

xxx().pipe(
  catchError(err => of('some value')),
);

This will continue the stream with "some value" instead of the value of your stream.

answered Apr 2, 2019 at 10:46

user4676340

Sign up to request clarification or add additional context in comments.

2 Comments

sebba23 Over a year ago

Thanks for the answer, but it doesn't catch the error. In Network I see that the call fails but I can't seem to get it

sebba23 Over a year ago

I've tried both, I subscribe from a component to get the result and bind it to the html. here's the subscription but I get scanData = null instead of catching the error. pastebin.com/WEM1pfhQ

Yash Rami · Accepted Answer · 2019-04-02 10:46:18Z

1

here it an example

     this.dataWedge.scanResult$
     .pipe(
     tap(_ => (this.scanning = false)),
     filter(_ => this.assignState.getAssign() === this.assignState.Default),
     switchMap(scanData =>
       this.api.callApi(
        PurchaseOrderQuery,
        {
          DataString: scanData.DataString
        }
      )
     )
    )
    .subscribe(purchaseOrder => {
     this.scannedResult$.next(purchaseOrder);
    }, err {
           console.log(err); // here you will get the error if api call fails 
    });

answered Apr 2, 2019 at 10:46

Yash Rami

2,3371 gold badge12 silver badges16 bronze badges

7 Comments

sebba23 Over a year ago

Thanks for your answer but it doesn't work. After the switchMap it won't go into the subscribe. It goes to another subscribe that I call from another component to bind the html with the result from the api, and I get it null

Yash Rami Over a year ago

if you write error section in another component subscribe then is it working for you or you have to use catchError section for this?

sebba23 Over a year ago

I subscribe from a component to get the result and bind it to the html. here's the subscription but I get scanData = null instead of catching the error. pastebin.com/WEM1pfhQ

Yash Rami Over a year ago

can you remove the pipe and try again

sebba23 Over a year ago

the status is 200

|

Collectives™ on Stack Overflow

how to catch error when api call fails in angular 2

2 Answers 2

2 Comments

7 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

7 Comments

Related