Panduan untuk menggunakan mergeMap dan forkJoin alih-alih langganan sederhana untuk beberapa permintaan API.Pada artikel ini, saya akan menunjukkan dua pendekatan untuk menangani beberapa kueri di Angular menggunakan mergeMap dan forkJoin.
Konten:
- Masalah
- berlangganan
- mergeMap
- forkJoin
- Menggabungkan mergeMap dan forkJoin
- Bandingkan berlangganan dengan mergeMap dan forkJoin
Masalah
Dalam pengembangan aplikasi web, kita sering membutuhkan lebih dari satu panggilan API. Anda pergi ke halaman, membuat beberapa permintaan, mendapatkan data yang diperlukan dan hasil dari beberapa permintaan ini diperlukan untuk panggilan selanjutnya.
Ketika kami membuat beberapa permintaan seperti itu, penting untuk memprosesnya secara efisien dengan tetap mempertahankan tingkat kinerja dan kualitas kode yang tinggi.
Saya akan menunjukkan kepada Anda aplikasi sederhana di mana kami perlu membuat 3 permintaan ke API pengujian (
https://jsonplaceholder.typicode.com ):
- Masuk dan minta informasi pengguna
- Berdasarkan informasi pengguna, kami mendapatkan daftar posting pengguna
- Berdasarkan informasi pengguna, kami mendapatkan daftar album yang dibuat oleh pengguna
berlangganan adalah cara biasa untuk menangani permintaan di Angular, tetapi ada metode yang lebih efisien. Pertama kita akan memecahkan masalah menggunakan berlangganan, dan kemudian kita akan meningkatkan solusi menggunakan mergeMap dan forkJoin.
berlangganan
Cara yang cukup sederhana. Kami membuat permintaan pertama ke API. Kemudian, dalam berlangganan bersarang, sehingga Anda dapat menggunakan jawaban pertama, kami membuat dua permintaan lagi ke API.
mergeMap
Operator ini paling baik digunakan ketika kita perlu mengontrol urutan permintaan secara manual.
Jadi kapan kita menggunakan mergeMap?
Ketika hasil dari permintaan API pertama, kita perlu melakukan hal berikut.
Lihatlah sebuah contoh, kita melihat bahwa untuk permintaan kedua kita membutuhkan userId dari respons panggilan pertama.
Harap dicatat:
- flatMap - alias untuk mergeMap
- mergeMap mendukung beberapa langganan internal yang aktif secara bersamaan, sehingga Anda dapat membuat kebocoran memori dengan langganan yang berumur panjang
forkJoin
Operator ini cocok jika kita perlu membuat beberapa pertanyaan dan hasilnya masing-masing penting. Artinya, Anda bisa mengelompokkan beberapa kueri, menjalankannya secara paralel dan hanya mengembalikan satu yang dapat diamati.
Jadi kapan kita menggunakan forkJoin?
Ketika permintaan dapat dieksekusi secara paralel dan tidak bergantung satu sama lain.
Menggabungkan mergeMap dan forkJoin
Biasanya dalam pengembangan kita dihadapkan pada situasi ketika Anda perlu membuat beberapa permintaan yang tergantung pada hasil pelaksanaan beberapa permintaan lainnya. Mari kita lihat bagaimana ini bisa dilakukan menggunakan mergeMap dan forkJoin.
Jadi, kami menghindari langganan yang bersarang dan memecah kode menjadi beberapa metode kecil.
Membandingkan langganan reguler dengan mergeMap dan forkJoin
Satu-satunya perbedaan yang saya perhatikan adalah penguraian HTML.
Mari kita lihat waktu pengambilan parsing saat menggunakan langganan reguler:
Sekarang mari kita lihat berapa banyak HTML yang diuraikan menggunakan mergeMap dan forkJoin
Saya membandingkan hasilnya beberapa kali dan sampai pada kesimpulan bahwa parsing dengan mergeMap dan forkJoin selalu lebih cepat tetapi perbedaannya tidak terlalu besar (~ 100ms).
Yang paling penting adalah cara untuk membuat kode lebih mudah dimengerti dan dibaca.
Untuk meringkas
Kita bisa menggunakan RxJS untuk menangani beberapa permintaan di Angular. Ini membantu kami menulis kode yang lebih mudah dibaca dan didukung. Nah, sebagai bonus, kami melihat sedikit peningkatan kinerja jika kami menggunakan metode RxJS alih-alih langganan biasa.
Semoga artikel ini bermanfaat! Ikuti saya di
Medium dan
Twitter . Jangan ragu untuk berkomentar dan mengajukan pertanyaan. Saya akan dengan senang hati membantu!
Sumber di
sini .