javascript - Property 'catch' does not exist on type 'Observable<any>' - Stack Ove

admin管理员组

文章数量:1133889

On the Angular 2 documentation page for using the Http service, there is an example.

getHeroes (): Observable<Stuff[]> {
  return this.http.get(this.url)
                  .map(this.extractData)
                  .catch(this.handleError);
}

I cloned the angular2-webpack-starter project and added the above code myself.

I imported Observable using

import {Observable} from 'rxjs/Observable';

I'm assuming the properties Observable are imported as well (.map works). Looked at the changelog for rxjs.beta-6 and nothing is mentioned about catch.

On the Angular 2 documentation page for using the Http service, there is an example.

getHeroes (): Observable<Stuff[]> {
  return this.http.get(this.url)
                  .map(this.extractData)
                  .catch(this.handleError);
}

I cloned the angular2-webpack-starter project and added the above code myself.

I imported Observable using

import {Observable} from 'rxjs/Observable';

I'm assuming the properties Observable are imported as well (.map works). Looked at the changelog for rxjs.beta-6 and nothing is mentioned about catch.

• javascript
• angular
• typescript
• rxjs

Share Improve this question Follow edited Aug 15, 2018 at 19:29 Vadim Kotov 8,27488 gold badges5050 silver badges6363 bronze badges asked May 6, 2016 at 13:30 BrianRTBrianRT 1,96255 gold badges1919 silver badges2727 bronze badges

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 253

Warning: This solution is deprecated since Angular 5.5, please refer to Trent's answer below

=====================

Yes, you need to import the operator:

import 'rxjs/add/operator/catch';

Or import Observable this way:

import {Observable} from 'rxjs/Rx';

But in this case, you import all operators.

See this question for more details:

• Angular HTTP GET with TypeScript error http.get(...).map is not a function in [null]

With RxJS 5.5+, the catch operator is now deprecated. You should now use the catchError operator in conjunction with pipe.

RxJS v5.5.2 is the default dependency version for Angular 5.

For each RxJS Operator you import, including catchError you should now import from 'rxjs/operators' and use the pipe operator.

Example of catching error for an Http request Observable

import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';
...

export class ExampleClass {
  constructor(private http: HttpClient) {
    this.http.request(method, url, options).pipe(
      catchError((err: HttpErrorResponse) => {
        ...
      }
    )
  }
  ...
}

Notice here that catch is replaced with catchError and the pipe operator is used to compose the operators in similar manner to what you're used to with dot-chaining.

---

See the rxjs documentation on pipable (previously known as lettable) operators for more info.

In angular 8:

//for catch:
import { catchError } from 'rxjs/operators';

//for throw:
import { Observable, throwError } from 'rxjs';

//and code should be written like this.

getEmployees(): Observable<IEmployee[]> {
    return this.http.get<IEmployee[]>(this.url).pipe(catchError(this.erroHandler));
  }

  erroHandler(error: HttpErrorResponse) {
    return throwError(error.message || 'server Error');
  }

Check the Angular version you are using and respective to that :

import {Observable} from 'rxjs';

or

import {Observable} from 'rxjs/Rx';

本文标签： javascriptProperty 39catch39 does not exist on type 39Observableltanygt39Stack Overflow