Property 'catch' does not exist on type 'Observable'

问题

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.

回答1:

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 2 HTTP GET with TypeScript error http.get(...).map is not a function in [null]

回答2:

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.

来源：https://stackoverflow.com/questions/37073705/property-catch-does-not-exist-on-type-observableany

标签

javascript