Kuasai JavaScript Asynchronous dengan RxJS

TL;DR: RxJS ialah perpustakaan JavaScript yang berkuasa untuk mengurus strim data tak segerak, memudahkan operasi kompleks seperti pengendalian acara dan interaksi API. Ia menggunakan pemerhatian untuk mewakili aliran data, pengendali untuk mengubah dan memanipulasinya serta langganan untuk bertindak balas terhadap nilai yang dipancarkan.

Dalam landskap dinamik pembangunan JavaScript moden, pengendalian operasi tak segerak dengan cekap adalah yang terpenting. RxJS (sambungan reaktif untuk JavaScript) ialah perpustakaan berkuasa yang dibangunkan untuk menangani cabaran ini, membolehkan pembangun mengurus strim data tak segerak dengan keanggunan dan ketepatan.

Apakah RxJS?

RxJS ialah perpustakaan yang membenarkan pembangun bekerja dengan program tak segerak dan berasaskan acara menggunakan jujukan yang boleh diperhatikan. Pada terasnya terletak konsep pengaturcaraan reaktif, paradigma yang berpusat di sekitar aliran data dan penyebaran perubahan. Pendekatan ini amat berharga apabila berurusan dengan antara muka pengguna, di mana pelbagai acara seperti interaksi pengguna, pengambilan data dan perubahan keadaan aplikasi boleh dianggap sebagai aliran data yang mengalir. Daripada bertindak balas secara langsung kepada setiap peristiwa, pengaturcaraan reaktif menggalakkan pembangun untuk mengisytiharkan cara apl harus bertindak apabila perubahan berlaku dalam strim ini.

Konsep teras

Untuk memahami kuasa RxJS, adalah penting untuk memahami blok asasnya:

• Boleh diperhatikan: Boleh diperhatikan ialah nadi RxJS, mewakili sumber data yang memancarkan nilai dari semasa ke semasa. Ia boleh dibuat daripada pelbagai sumber, termasuk peristiwa, janji dan data sedia ada. Fikirkan yang boleh diperhatikan sebagai saluran paip yang melaluinya data mengalir.
• Pemerhati: Pemerhati ialah objek yang melanggan kepada pemerhatian dan mentakrifkan cara bertindak balas terhadap nilai yang dipancarkan. Ia bertindak sebagai pendengar, menentukan tindakan yang perlu diambil apabila data baharu tiba.
• Langganan: Langganan mewakili hubungan antara pemerhati dan pemerhatian. Ia seperti kontrak yang membolehkan pemerhati menerima nilai daripada yang boleh diperhatikan. Apabila anda melanggan sesuatu yang boleh diperhatikan, anda mula menerima data sehingga anda menyahlanggan secara eksplisit.
• Pengendali: Operator ialah fungsi tulen yang membolehkan transformasi, penapisan dan gabungan pemerhatian. Mereka bertindak sebagai pengubah, membentuk dan memperhalusi data yang mengalir melalui aliran yang boleh diperhatikan. Mereka menyediakan cara deklaratif untuk memanipulasi aliran data tanpa mengubah suai sumber asal.

Pemerhatian sejuk vs panas

Pemerhatian dalam RxJS boleh dikategorikan sebagai sama ada sejuk atau panas:

• Pemerhatian sejuk dicipta atas permintaan dan mula mengeluarkan nilai hanya apabila melanggan. Setiap langganan baharu mencetuskan pelaksanaan baharu yang boleh diperhatikan. Sebagai contoh, pemerhatian yang dibuat daripada permintaan HTTP dianggap sejuk kerana ia membuat permintaan hanya apabila pelanggan menyatakan minat.
• Pemerhatian hangat wujud secara bebas daripada langganan dan mengeluarkan nilai tanpa mengira sama ada sesiapa mendengar. Mereka mewakili aliran data berterusan yang dikongsi di kalangan semua pelanggan. Contohnya termasuk peristiwa tetikus atau penanda saham, di mana aliran data berterusan tanpa mengira bilangan pemerhati.

Mari kita ilustrasikan konsep ini dengan contoh mudah.

Mencipta Yang Boleh Diperhatikan

import { Observable } from "rxjs";

const first5Numbers$ = new Observable((obs) => {
  console.log("hello!");
  for (let i = 0; i < 5; i++) {
    obs.next(i);
  }
  obs.complete();
});

// Logs nothing.
first5Numbers$.subscribe((n) => {
  console.log(n);
});

// Logs "hello!" followed by 0 1 2 3 4.

Dalam contoh ini, first5Numbers$ ialah pemerhatian sejuk yang mengeluarkan nombor 0 hingga 4. Kaedah langgan melampirkan pemerhati kepada pemerhatian. Kaedah seterusnya digunakan untuk memancarkan nilai daripada yang boleh diperhatikan. Kaedah lengkap menandakan tamat strim.

Menggunakan operator

import { interval } from "rxjs";
import { take } from "rxjs/operators";

const first5SpacedNumbers$ = interval(1000).pipe(take(5));

Di sini, kami mencipta first5SpacedNumbers$ yang boleh diperhatikan yang mengeluarkan nilai setiap saat. Pengendali ambil digunakan untuk mengehadkan strim kepada lima pelepasan pertama.

Mengapa menggunakan RxJS?

RxJS bersinar dalam beberapa senario:

• Mengendalikan operasi tak segerak yang kompleks: RxJS menyediakan pendekatan berstruktur untuk mengurus aliran tak segerak yang rumit, menghalang neraka panggil balik dan janji yang sangat bersarang. Sifat deklaratifnya membolehkan anda menyatakan logik kompleks secara ringkas, menjadikan kod anda lebih mudah dibaca dan diselenggara.
• Aplikasi masa nyata: Dengan sokongannya untuk hot observables, RxJS cemerlang dalam membina apl masa nyata seperti apl sembang, ticker saham dan alatan penyuntingan kolaboratif.
• Pengendalian acara: RxJS memudahkan pengendalian interaksi pengguna, acara DOM dan acara tak segerak yang lain, menyediakan cara yang diperkemas untuk mengurus penyebaran dan respons acara.

RxJS lwn janji dan async/menunggu

Walaupun janji dan async/wait adalah berharga untuk mengendalikan operasi tak segerak tunggal, RxJS menjurus ke arah mengurus aliran peristiwa tak segerak. Berikut ialah perbandingan:

• Janji: Selesaikan dengan satu nilai dan berguna terutamanya untuk tugas tak segerak sekali.
• Async/wait: Sediakan sintaks yang kelihatan lebih segerak untuk bekerja dengan janji tetapi masih fokus pada operasi tak segerak individu.
• RxJS: Mengendalikan berbilang nilai dari semasa ke semasa, menawarkan pengendali untuk mengubah, menapis dan menggabungkan nilai ini. Ia sesuai untuk senario di mana data tiba secara berterusan atau pecah.

Menyediakan RxJS

Pemasangan

Anda boleh memasang RxJS dalam projek anda menggunakan npm atau benang:

import { Observable } from "rxjs";

const first5Numbers$ = new Observable((obs) => {
  console.log("hello!");
  for (let i = 0; i < 5; i++) {
    obs.next(i);
  }
  obs.complete();
});

// Logs nothing.
first5Numbers$.subscribe((n) => {
  console.log(n);
});

// Logs "hello!" followed by 0 1 2 3 4.

atau

import { interval } from "rxjs";
import { take } from "rxjs/operators";

const first5SpacedNumbers$ = interval(1000).pipe(take(5));

Sebagai alternatif, anda boleh memasukkan RxJS melalui pautan CDN dalam fail HTML anda.

npm install rxjs

Mari kita cipta pemerhatian yang mudah dan langganinya.

yarn add rxjs

Dalam contoh ini, kami menggunakan operator dari untuk mencipta pemerhatian yang mengeluarkan nilai 1, 2 dan 3.

Operator dalam RxJS

Pengendali ialah tulang belakang RxJS, menyediakan perbendaharaan kata yang kaya untuk memanipulasi aliran data. Berikut ialah beberapa kategori pengendali:

• Pengendali ciptaan: Cipta pemerhatian daripada pelbagai sumber, seperti daripada, dari, selang dan dariAcara.
• Pengendali transformasi: Ubah suai nilai yang dipancarkan, seperti peta, flatMap, switchMap dan scan.
• Operator penapisan: Pancarkan nilai secara terpilih berdasarkan kriteria, seperti tapis, distinctUntilChanged dan ambil.
• Operator gabungan: Cantumkan atau gabungkan berbilang yang boleh diperhatikan, seperti cantum, concat, zip dan combineLatest.

Kes penggunaan dunia sebenar

Mari kita terokai beberapa contoh dunia sebenar pengendali utama:

• peta: Ubah nilai yang dipancarkan oleh pemerhatian. Contohnya, anda boleh menggunakan peta untuk mengekstrak data tertentu daripada respons HTTP.

import { Observable } from "rxjs";

const first5Numbers$ = new Observable((obs) => {
  console.log("hello!");
  for (let i = 0; i < 5; i++) {
    obs.next(i);
  }
  obs.complete();
});

// Logs nothing.
first5Numbers$.subscribe((n) => {
  console.log(n);
});

// Logs "hello!" followed by 0 1 2 3 4.

• penapis: Keluarkan hanya nilai yang memenuhi syarat tertentu. Sebagai contoh, anda boleh menapis aliran acara untuk memproses hanya klik tetikus dalam kawasan tertentu.

import { interval } from "rxjs";
import { take } from "rxjs/operators";

const first5SpacedNumbers$ = interval(1000).pipe(take(5));

• bercantum: Gabungkan berbilang pemerhatian ke dalam satu aliran, memancarkan nilai daripada semua sumber apabila ia tiba. Ini berguna untuk mengendalikan acara daripada sumber yang berbeza, seperti input pengguna dan respons pelayan.

npm install rxjs

• switchMap: Apabila sumber yang boleh diperhatikan mengeluarkan nilai, ia melanggan kepada yang boleh diperhatikan dalam yang baharu dan membatalkan yang boleh diperhatikan dalam sebelumnya. Ini berguna untuk senario seperti panggilan API yang dicetuskan oleh input pengguna, di mana anda hanya mengambil berat tentang permintaan terkini.

yarn add rxjs

• catchError: Tangani ralat dengan anggun dalam strim yang boleh diperhatikan. Ia membolehkan anda menangkap ralat, melakukan tindakan seperti mengelog atau mencuba semula, dan secara pilihan mengembalikan pemerhatian baharu untuk meneruskan strim.

<script src="https://unpkg.com/rxjs@7/dist/bundles/rxjs.umd.min.js"></script>

Ralat pengendalian dalam RxJS

RxJS menyediakan mekanisme yang teguh untuk mengurus ralat dalam aliran yang boleh diperhatikan.

• cuba semula: Jika pemerhatian mengeluarkan ralat, pengendali cuba semula melanggan semula sumber yang boleh diperhatikan, cuba pulih daripada ralat. Anda boleh menentukan bilangan percubaan cuba semula atau gunakan logik cuba semula berdasarkan jenis ralat.
• catchError: Seperti yang dinyatakan sebelum ini, pengendali catchError membolehkan anda mengendalikan ralat dengan anggun, mencatatnya, menggantikan ralat dengan nilai lalai atau mengembalikan ralat baharu yang boleh diperhatikan untuk meneruskan strim.
• memuktamadkan: Operator ini melaksanakan fungsi panggil balik tanpa mengira sama ada yang boleh diperhatikan berjaya diselesaikan atau mengeluarkan ralat. Ia berguna untuk tugas pembersihan, seperti menutup sumber atau menetapkan semula keadaan.

Rujuk contoh kod berikut untuk pengendalian ralat dalam RxJS.

import { of } from "rxjs";

const myObservable$ = of(1, 2, 3);

myObservable$.subscribe((value) => {
  console.log(value); // Outputs: 1, 2, 3
});

Dalam contoh ini, yang boleh diperhatikan cuba mencuba semula dua kali jika ralat berlaku. Jika semua percubaan semula gagal, pengendali catchError mengendalikan ralat itu. Pengendali memuktamadkan merekodkan mesej apabila pemerhatian selesai atau ralat.

Aplikasi praktikal

Mari lihat cara RxJS boleh digunakan dalam senario dunia sebenar:

• Pengesahan borang: RxJS sangat sesuai untuk mencipta borang reaktif, di mana pengesahan berlaku dalam masa nyata semasa pengguna menaip. Anda boleh menggunakan pemerhatian untuk memantau perubahan input, menggunakan peraturan pengesahan dan memberikan maklum balas segera.
• Tinjauan API: RxJS memudahkan pelaksanaan mekanisme pengundian. Anda boleh menggunakan pengendali seperti selang dan switchMap untuk mengambil data secara berkala daripada API, mengendalikan respons dan ralat dengan anggun.
• Apl sembang masa nyata: RxJS sesuai untuk membina apl sembang masa nyata. Pemerhatian panas boleh mewakili aliran mesej dan pengendali seperti peta dan penapis boleh digunakan untuk memproses dan memaparkan mesej.

Petua dan amalan terbaik

Untuk menggunakan RxJS dengan berkesan dalam projek anda:

• Penguraian: Pecah logik kompleks kepada pemerhatian yang lebih kecil dan boleh diurus yang boleh digabungkan menggunakan operator.
• Pengendalian ralat: Gunakan catchError dan cuba semula untuk menangani ralat dengan anggun dan meningkatkan daya tahan apl.
• Nyahlanggan: Cegah kebocoran memori dengan menyahlanggan daripada yang boleh diperhatikan apabila ia tidak lagi diperlukan. Pertimbangkan untuk menggunakan alatan seperti takeUntil atau paip async dalam Angular untuk memudahkan pengurusan langganan.
• Pengujian: Manfaatkan utiliti ujian RxJS, seperti TestScheduler, untuk menguji logik boleh diperhatikan anda dengan teliti.

Perangkap biasa

• Terlalu banyak menggunakan RxJS: Walaupun berkuasa, RxJS boleh menambah kerumitan jika digunakan secara tidak wajar. Berpegang pada senario di mana kekuatannya benar-benar bermanfaat.
• Kebocoran ingatan: Mengabaikan untuk menyahlanggan yang boleh diperhatikan boleh menyebabkan kebocoran ingatan. Sentiasa pastikan pengurusan langganan yang betul.

Kesimpulan

Terima kasih kerana membaca blog! RxJS menyediakan cara yang berkuasa dan elegan untuk mengendalikan strim data tak segerak dalam apl JavaScript. Model pengaturcaraan reaktifnya, ditambah dengan set pengendali yang kaya, membolehkan pembangun membina apl yang responsif, berskala dan boleh diselenggara. Dengan menerima konsep pemerhatian, pemerhati dan pengendali, anda boleh membuka kunci potensi penuh RxJS dan meningkatkan kemahiran pembangunan JavaScript anda. Keluk pembelajarannya mungkin kelihatan curam pada mulanya, tetapi ganjaran dari segi kejelasan kod, kebolehselenggaraan dan kecekapan amat berbaloi.

Blog Berkaitan

• Axios and Fetch API? Memilih Pelanggan HTTP yang Tepat
• Jenis Utiliti TypeScript: Panduan Lengkap
• API Mengejek untuk Ujian Unit: Amalan Terbaik untuk Pembangun
• Apa yang Baharu dalam JavaScript: ECMAScript 2024 (Edisi 15)

Atas ialah kandungan terperinci Kuasai JavaScript Asynchronous dengan RxJS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!