Angular Academy · Pelajaran

rxMethod untuk Pekerjaan Asinkron

Tangani alur asinkron dengan rxMethod.

Pelajaran 3 dari 413 langkah

rxMethod untuk Pekerjaan Asinkron adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.

Asinkron di SignalStore

Banyak tindakan berlangsung secara asinkron: memuat data, pencarian dengan debounce, dan polling. SignalStore menyediakan rxMethod untuk mengelola alur asinkron reaktif yang dapat dibatalkan.

Dasar-Dasar rxMethod

rxMethod membuat method yang didukung oleh pipeline RxJS. Anda memanggilnya dengan nilai (atau signal/observable), lalu nilai tersebut didorong ke dalam stream.

import { rxMethod } from '@ngrx/signals/rxjs-interop';
import { pipe, switchMap, tap } from 'rxjs';

withMethods((store, api = inject(Api)) => ({
  load: rxMethod<string>(pipe(
    switchMap(id => api.getById(id)),
    tap(item => patchState(store, { current: item }))
  ))
}))

Memanggil rxMethod

Panggil seperti method biasa dengan nilai sederhana. Nilai tersebut masuk ke pipeline yang Anda definisikan.

store.load('42');

Meneruskan Signal

Anda dapat meneruskan signal ke rxMethod. Pipeline dijalankan ulang secara otomatis setiap kali signal tersebut berubah, sehingga cocok untuk pemuatan reaktif.

selectedId = signal('1');
ngOnInit() {
  this.store.load(this.selectedId); // reloads when selectedId changes
}

switchMap Membatalkan Pekerjaan Lama

Menggunakan switchMap berarti emisi baru membatalkan permintaan sebelumnya yang masih berlangsung. Hal ini mencegah kondisi balapan ketika respons lama yang lambat menimpa respons yang lebih baru.

Melacak State Pemuatan

Terapkan tanda pemuatan di awal dan hapus saat selesai agar UI dapat menampilkan indikator pemuatan.

load: rxMethod<string>(pipe(
  tap(() => patchState(store, { loading: true })),
  switchMap(id => api.getById(id).pipe(
    tap(item => patchState(store, { current: item, loading: false }))
  ))
))

Penanganan Error

Error harus ditangani di dalam pipeline; jika tidak, stream selesai dan method berhenti bekerja. Gunakan catchError di dalam observable bagian dalam.

switchMap(id => api.getById(id).pipe(
  tap(item => patchState(store, { current: item, error: null })),
  catchError(err => {
    patchState(store, { error: err.message, loading: false });
    return EMPTY;
  })
))

Pencarian dengan Debounce

Komposisikan operator berbasis waktu untuk pencarian saat pengguna mengetik. Pipeline menerapkan debounce dan peralihan seperti RxJS biasa.

search: rxMethod<string>(pipe(
  debounceTime(300),
  distinctUntilChanged(),
  switchMap(q => api.search(q)),
  tap(results => patchState(store, { results }))
))

Memilih Operator Perataan

Gunakan switchMap untuk membatalkan pekerjaan lama, concatMap untuk mengantrekan, mergeMap untuk menjalankan secara paralel, dan exhaustMap untuk mengabaikan panggilan baru saat sedang sibuk. Pilih berdasarkan konkurensi yang diinginkan.

Pembersihan Otomatis

Langganan pipeline terikat pada siklus hidup store. Ketika store dihancurkan (jika cakupannya komponen), stream dihentikan sehingga tidak ada kebocoran dan tidak diperlukan unsubscribe manual.

Inisialisasi Saat Dibuat

Gabungkan rxMethod dengan fitur withHooks untuk memicu pemuatan awal ketika store dibuat.

withHooks({
  onInit(store) { store.load('initial'); }
})

Pemeriksaan Singkat

Periksa pengetahuan Anda tentang rxMethod.

Jawab di pelajaran interaktif

Ringkasan

Anda telah menggunakan rxMethod untuk alur asinkron: memanggilnya dengan nilai atau signal, memilih operator perataan (switchMap untuk membatalkan pekerjaan lama), melacak pemuatan, menangani error dengan catchError, dan mengandalkan pembersihan langganan otomatis.

Gratis untuk memulai

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

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “rxMethod untuk Pekerjaan Asinkron” gratis?

Ya — teks lengkap “rxMethod untuk Pekerjaan Asinkron” 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 “rxMethod untuk Pekerjaan Asinkron”?

Tangani alur asinkron dengan rxMethod. 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 3 dari 4.

Berapa lama pelajaran “rxMethod untuk Pekerjaan Asinkron” 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

← Kembali ke Angular Academy