CODEWITHSUNDEEP
angulartypescriptangular8
Ashruti
Ashruti

Reputation: 321

How to solve catch error in Observable in angular 8?

I do error handler code, but I got error in catch. undefined method.

This is my serivce.ts code.

import { Injectable } from "@angular/core";
import { HttpClient, HttpErrorResponse } from "@angular/common/http";
import { user } from "./user";
import { Observable } from "rxjs";
import "rxjs/add/operator/catch";
import "rxjs/add/Observable/throw";
@Injectable({
  providedIn: "root"
})
export class DemoService {
  private url: string = "/assets/demo/user.json";
  constructor(private http: HttpClient) {}

  getuserdetails(): Observable<user[]> {
    return this.http.get<user[]>(this.url).catch(this.errorHandler);
  }
  errorHandler(error: HttpErrorResponse) {
    return Observable.throw(error.message || "server error.");
  }
}

This is my app.component.ts file code

 public userdetails = [];
  public errorMsg;
  constructor(private user: DemoService) {}
  ngOnInit() {
    this.user
      .getuserdetails()
      .subscribe(
        $data => (this.userdetails = $data),
        error => (this.errorMsg = error)
      );
  }

I got error in catch. and error message is Property 'catch' does not exist on type 'Observable'.

Upvotes: 22

Views: 72546

Answers (5)

Jacek Pietal
Jacek Pietal

Reputation: 11

https://rxjs.dev/deprecations/subscribe-arguments

you should do:

source$.subscribe({ next: doSomething, error: doSomethingElse, complete: lol }).

according to latest docs

Upvotes: 1

Dave
Dave

Reputation: 7379

In the last version of rxjs you should use:

return return this.http.get<user[]>(this.url)
                  .subscribe((r:Author) => console.log("GOOD"),
                                    err => console.log("ERROR))

Upvotes: 8

Ninoos Al Katoni
Ninoos Al Katoni

Reputation: 97

import { Observable, throwError } from 'rxjs';
import { catchError, } from 'rxjs/operators';

return this.http.get<user[]>(this.url).pipe(catchError(this.errorHandler))

errorHandler(error: HttpErrorResponse) {
    return throwError(error.message || "server error.");
}

Upvotes: 5

Mises
Mises

Reputation: 4623

Best way to catch error on observable is:

this.http.get<user[]>(this.url).pipe(
   tap(),
   catchError(err => { return this.errorHandler(err) }
)

If this.http.get() is an Promise lave it like You did in Your code .catch(...) is ok. Try to have catchError(...) at the end of pipe or before finalize(..) if You use it.

Before Observables had no .pipe() and You where chaining operations like in Promises so they change name .then() to i think flatMap() and .catch() to catchError() So programmer know are it is Observable or Promise.

Upvotes: 4

Sudarshana Dayananda
Sudarshana Dayananda

Reputation: 5265

You can use catchError in rxjs/operators for this. Try it as follows.

import { catchError } from 'rxjs/operators';

export class DemoService {

    getuserdetails(): Observable<user[]> {
        return this.http.get<user[]>(this.url)
            .pipe(catchError(this.errorHandler))
    }
    errorHandler(error: HttpErrorResponse) {
        return Observable.throw(error.message || "server error.");
    }
}

Upvotes: 19

Related Questions