Properti 'catch' tidak ada pada tipe 'Observable <any>'

127

Pada halaman dokumentasi 2 sudut untuk menggunakan layanan Http, ada contoh.

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

Saya mengkloning proyek angular2-webpack-starter dan menambahkan kode di atas sendiri.

Saya mengimpor Observablemenggunakan

import {Observable} from 'rxjs/Observable';

Saya mengasumsikan properti Observablejuga diimpor ( .mapberfungsi). Melihat changelog untuk rxjs.beta-6 dan tidak ada yang disebutkan tentang catch.

javascript angular typescript rxjs BrianRT
sumber

Jawaban:

246

Peringatan : Solusi ini sudah usang sejak Angular 5.5, silakan merujuk ke jawaban Trent di bawah ini

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

Ya, Anda perlu mengimpor operator:

import 'rxjs/add/operator/catch';

Atau impor Observabledengan cara ini:

import {Observable} from 'rxjs/Rx';

Tetapi dalam hal ini, Anda mengimpor semua operator.

Lihat pertanyaan ini untuk lebih jelasnya:

Thierry Templier
sumber
2
Apakah Anda tahu mengapa properti tidak diimpor import {Observable} from 'rxjs/Observable';? Itu tampak lebih intuitif bagi saya.
BrianRT
6
Karena Rxjs dirancang seperti ini. The rxjs/Observablemodul tidak mengimpor operator karena ada banyak operator. The rxjs/Rximpor modul semua ... Saya berpikir bahwa itu adalah pilihan desain.
Thierry Templier
4
mengimpor dari rxjs / Rx benar-benar memperlambat pemuatan halaman. bandingkan jumlah permintaan dengan itu v tanpa = setengah dari permintaan ketika Anda tidak menggunakan rxjs / Rx tetapi gunakan misalnya rxjs / Observable
danday74
Impor rxjs / Rx sering bahkan tidak akan serat lagi, ini adalah impor daftar hitam. Saya tahu di masa lalu ini terlihat seperti ok (dan saya sudah melakukannya), tetapi saat ini seharusnya tidak menjadi bagian dari jawaban yang benar untuk hal lain selain bermain-main.
Tim Consolazio
93

Dengan RxJS 5.5+, catchoperator sekarang tidak digunakan lagi. Anda sekarang harus menggunakan catchErroroperator bersamaan dengan pipe.

RxJS v5.5.2 adalah versi dependensi default untuk Angular 5.

Untuk setiap Operator RxJS yang Anda impor, termasuk catchErrorsekarang Anda harus mengimpor dari 'rxjs / operator' dan menggunakan operator pipa.

Contoh kesalahan penangkapan untuk permintaan Http Diamati

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) => {
        ...
      }
    )
  }
  ...
}

Perhatikan di sini bahwa catchdiganti dengan catchErrordan pipeoperator digunakan untuk menyusun operator dengan cara yang sama dengan apa yang Anda gunakan dengan dot-chaining.

Lihat dokumentasi rxjs pada operator pipable (sebelumnya dikenal sebagai lABLE ) untuk info lebih lanjut.

Trent
sumber
yang map(res => res)diperlukan?
Pieter De Bie
1
Tidak, pipefungsi RxJS memungkinkan Anda menggabungkan beberapa fungsi menjadi satu fungsi. Fungsi pipe () mengambil sebagai argumennya fungsi yang ingin Anda gabungkan, dan mengembalikan fungsi baru yang, ketika dieksekusi, menjalankan fungsi yang dikomposisikan secara berurutan. Pemetaan itu tidak melakukan apa-apa, karena secara teknis merupakan fungsi identitas.
Trent
1 
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');
  }
Pangeran Babbar
sumber