⚡ Bagaimana agar tidak mengulangi kesalahan RxJ yang sama lagi⚡

Ingat: .pipe () bukan .subscribe ()!

Artikel ini ditujukan untuk pemula yang mencoba meningkatkan pengetahuan RxJ mereka tetapi juga bisa menjadi penyegaran cepat atau referensi untuk ditunjukkan kepada pemula untuk pengembang yang lebih berpengalaman!

Hari ini kita akan membuatnya singkat dan langsung ke intinya!

Saat ini saya bekerja di organisasi yang cukup besar dengan beberapa tim dan proyek (lebih dari 40 SPA) yang sedang dalam proses migrasi ke Angular dan oleh karena itu juga RxJs.

Ini merupakan peluang besar untuk berhubungan dengan bagian-bagian RxJ yang membingungkan yang dapat dengan mudah dilupakan begitu seseorang menguasai API dan berfokus pada implementasi fitur-fiturnya.

Fungsi ".subscribe ()"

RxJ yang dapat diamati merupakan “resep” dari apa yang kita inginkan terjadi. Ini deklaratif yang berarti bahwa semua operasi dan transformasi ditentukan secara keseluruhan sejak awal.

Contoh aliran yang dapat diamati bisa terlihat seperti ini…

Aliran RxJ yang dapat diamati ini tidak akan melakukan apa pun dengan sendirinya. Untuk menjalankannya kita harus berlangganan di suatu tempat di basis kode kita!

Dalam contoh di atas, kami menyediakan penangan hanya untuk nilai yang dipancarkan oleh yang dapat diamati. Fungsi berlangganan itu sendiri menerima hingga tiga argumen berbeda untuk menangani nilai berikutnya , kesalahan , atau peristiwa lengkap .

Selain itu kita juga bisa mengirimkan objek dengan properti yang tercantum di atas. Objek semacam itu merupakan implementasi dari Observerantarmuka. Keuntungan pengamat adalah kita tidak harus menyediakan implementasi atau setidaknya nullplaceholder untuk penangan yang tidak kita minati.

Perhatikan contoh berikut…

Dalam kode di atas, kita mengirimkan literal objek yang hanya berisi penangan lengkap, nilai normal akan diabaikan dan kesalahan akan meluap tumpukan.

Dan dalam contoh ini, kami meneruskan handler dari kesalahan berikutnya dan menyelesaikannya sebagai argumen langsung dari fungsi subscribe. Semua penangan yang tidak diimplementasikan harus diteruskan sebagai nol atau tidak ditentukan sampai kita mendapatkan argumen yang kita minati.

Seperti yang bisa kita lihat, gaya argumen inline dari implementasi .subscribe()pemanggilan fungsi adalah posisi.

Menurut pengalaman saya, gaya argumen sebaris adalah yang paling umum di berbagai proyek dan organisasi.

Sayangnya, sering kali kami mengalami penerapan seperti berikut…

Contoh di atas berisi penangan redundan untuk keduanya nextdan errorpenangan yang sama sekali tidak melakukan apa - apa dan bisa saja diganti oleh null.

Bahkan lebih baik melewatkan objek pengamat dengan completeimplementasi penangan, mengabaikan penangan lain sama sekali!

The ".pipe ()" dan operator

Karena para pemula terbiasa menyediakan tiga argumen untuk berlangganan, mereka sering mencoba menerapkan pola yang sama saat menggunakan operator serupa di rantai pipa.

Operator RxJs, yang sering disalahartikan sebagai .subscribe()penangan, adalah catchErrordan finalize. Keduanya memiliki tujuan yang sama juga - satu-satunya perbedaan adalah bahwa keduanya digunakan dalam konteks pipa, bukan langganan.

Jika kami ingin bereaksi terhadap peristiwa lengkap dari setiap langganan aliran observasi RxJs, kami dapat mengimplementasikan finalizeoperator sebagai bagian dari aliran yang dapat diamati itu sendiri.

Dengan cara itu kita tidak harus bergantung pada pengembang untuk mengimplementasikan penangan lengkap di setiap panggilan .subscribe (). Ingat, streaming yang dapat diamati dapat berlangganan lebih dari sekali!

Ini membawa kita ke pola terakhir dan bisa dibilang paling bermasalah yang mungkin kita temui saat menjelajahi berbagai basis kode: operator redundan ditambahkan saat mencoba mengikuti pola .subscribe () dalam konteks .pipe ().

Juga, kita mungkin menemukan sepupunya yang lebih bertele-tele…

Perhatikan bahwa kita telah berkembang dari satu baris asli menjadi sembilan baris penuh kode yang harus kita baca dan pahami ketika kita ingin memperbaiki bug atau menambahkan fitur baru.

Hal-hal mungkin menjadi lebih kompleks ketika dikombinasikan dengan jenis Typecript generik yang lebih kompleks, yang dapat membuat seluruh blok kode menjadi lebih misterius (dan karenanya membuang lebih banyak waktu kita).

Rekapitulasi

  1. The .subscribe()Metode menerima kedua objek pengamat dan penangan inline.
  2. Objek pengamat mewakili cara paling fleksibel dan ringkas untuk berlangganan aliran yang dapat diamati.
  3. Dalam hal ini kita ingin pergi dengan inline berlangganan argumen ( next, error, complete) kami dapat menyediakan nulldi tempat handler kita tidak perlu.
  4. Kita harus memastikan bahwa kita tidak mencoba mengulangi .subscribe()pola saat berhadapan dengan .pipe()operator dan.
  5. Selalu berusaha untuk menjaga kode sesederhana mungkin dan menghapus redundansi yang tidak perlu!

Itu dia! ✨

Saya harap Anda menikmati artikel ini dan sekarang memiliki pemahaman yang lebih baik tentang cara berlangganan observable RxJs dengan implementasi yang bersih dan ringkas!

Tolong dukung panduan ini dengan Anda ??? menggunakan tombol tepuk dan membantunya menyebar ke audiens yang lebih luas? Juga, jangan ragu untuk menghubungi saya jika Anda memiliki pertanyaan menggunakan tanggapan artikel atau DM Twitter @tomastrajan.

Dan jangan pernah lupa, masa depan cerah Memulai proyek Angular? Lihat Angular NgRx Material Starter!

Jika Anda sudah sampai sejauh ini, silakan lihat beberapa artikel saya yang lain tentang Angular dan pengembangan perangkat lunak frontend secara umum…

? ‍? ️ 7 Tips Pro Agar Produktif dengan CLI & Skema Sudut?

Sebuah g ular Schematics adalah alat alur kerja untuk web modern - resmi pengenalan articlehac kernoon.com   Cara Terbaik Untuk Berhenti berlangganan RxJS diamati Dalam Aplikasi sudut!

Ada banyak cara berbeda bagaimana menangani langganan RxJS dalam aplikasi Angular dan kami akan menjelajahi… blog.angularindepth.com Panduan Total Untuk Angular 6+ Dependency Injection - disediakan vs provider: []?

L et kita belajar kapan dan bagaimana menggunakan mekanisme baru sudut yang lebih baik 6 + injeksi ketergantungan dengan sintaks providedIn baru untuk membuat ... m edium.com The Ultimate Jawaban Untuk The Very umum sudut Pertanyaan: berlangganan () vs | Pipa asinkron

Sebagian besar pustaka manajemen status Angular populer seperti NgRx mengekspos status aplikasi dalam bentuk aliran… blog.angularindepth.com