Operator Penanganan Kesalahan
Pulihkan proses dengan catchError dan retry.
Operator Penanganan Kesalahan adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.
Kesalahan dalam observable
Saat sebuah observable menghasilkan kesalahan, observable tersebut berakhir: tidak ada nilai lagi, dan penangan kesalahan dijalankan. Operator kesalahan memungkinkan Anda memulihkan, mencoba lagi, atau mengubah kesalahan tanpa menghentikan aliran.
Jalur kesalahan
Tangani kesalahan di observer atau dengan operator. Tanpa penanganan, kesalahan yang tidak tertangani dapat menghentikan langganan secara tiba-tiba.
this.http.get('/api/data').subscribe({
next: d => console.log(d),
error: err => console.error('failed', err)
});catchError
catchError mencegat kesalahan dan mengembalikan observable pengganti, sehingga aliran dapat berlanjut dengan baik.
import { catchError, of } from 'rxjs';
this.http.get('/api/data').pipe(
catchError(err => {
console.error(err);
return of([]); // fallback value
})
).subscribe(data => console.log(data));Melemparkan ulang secara selektif
Di dalam catchError, Anda dapat memeriksa kesalahan dan memutuskan untuk memulihkan atau melemparkannya kembali dengan throwError.
import { catchError, throwError, of } from 'rxjs';
source$.pipe(
catchError(err =>
err.status === 404 ? of(null) : throwError(() => err)
)
).subscribe();retry
retry(n) berlangganan kembali ke sumber hingga n kali saat terjadi kesalahan — berguna untuk kegagalan jaringan sementara.
import { retry } from 'rxjs';
this.http.get('/api/flaky').pipe(
retry(2) // try up to 3 times total
).subscribe(d => console.log(d));retry dengan konfigurasi
Bentuk objek menambahkan jeda di antara percobaan (dan mendukung fungsi backoff), sehingga server tidak terus-menerus dibebani.
this.http.get('/api/flaky').pipe(
retry({ count: 3, delay: 1000 })
).subscribe(d => console.log(d));Backoff bergaya retryWhen
Untuk backoff eksponensial, opsi delay dapat berupa fungsi yang mengembalikan observable yang menunda semakin lama pada setiap percobaan.
import { timer } from 'rxjs';
source$.pipe(
retry({
delay: (err, count) => timer(count * 1000)
})
).subscribe();catchError setelah retry
Gabungkan keduanya: coba lagi saat terjadi kegagalan sementara, lalu gunakan cadangan dengan baik jika semua percobaan ulang habis.
this.http.get('/api/data').pipe(
retry({ count: 2, delay: 500 }),
catchError(() => of([]))
).subscribe(data => console.log(data));Penempatan itu penting
Posisi catchError dalam pipe menentukan cakupan. Di dalam switchMap, operator ini menangkap kesalahan pada setiap permintaan bagian dalam sehingga aliran luar tetap aktif; di bagian akhir, operator ini menangkap semuanya.
term$.pipe(
switchMap(t => this.http.get('/api?q=' + t).pipe(
catchError(() => of([])) // outer stream survives
))
).subscribe();EMPTY sebagai cadangan tanpa emisi
Mengembalikan EMPTY dari catchError akan menyelesaikan aliran tanpa nilai — berguna saat Anda ingin menelan kesalahan dan tidak menghasilkan apa pun.
import { EMPTY, catchError } from 'rxjs';
source$.pipe(
catchError(() => EMPTY)
).subscribe();finalize untuk pembersihan
finalize menjalankan callback saat aliran berakhir karena alasan apa pun — selesai, mengalami kesalahan, atau berhenti berlangganan. Pasangkan dengan penanganan kesalahan agar status pemuatan selalu diatur ulang.
import { finalize, catchError, of } from 'rxjs';
this.loading = true;
source$.pipe(
catchError(() => of([])),
finalize(() => this.loading = false)
).subscribe();Pemeriksaan Cepat
Uji pemahaman Anda tentang penanganan kesalahan.
Ringkasan: Operator Penanganan Kesalahan
Kesalahan mengakhiri aliran kecuali ditangani.
catchError: memulihkan aliran dengan mengembalikan observable pengganti.retry: berlangganan kembali saat gagal, dengan penundaan atau backoff opsional.- Penempatan (di dalam switchMap atau di bagian akhir) mengatur cakupan.
Anda telah menyelesaikan RxJS Operators in Depth.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 38
- Pelajaran
- 144
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Operator Penanganan Kesalahan” gratis?
Ya — teks lengkap “Operator Penanganan Kesalahan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Operator Penanganan Kesalahan”?
Pulihkan proses dengan catchError dan retry. Kamu berlatih Angular Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Angular Academy?
Tidak diperlukan pengalaman sebelumnya. Angular Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Operator Penanganan Kesalahan” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Angular Academy ini?
Ya. Setiap pelajaran Angular Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Operator Transformasi
- Operator Penyaringan
- Operator Kombinasi
- Operator Penanganan Kesalahan