Jadual Kandungan
biasa dengan rxjs
Kurangkan () membolehkan kita menggunakan semua nilai tunggal dan mengubahnya menjadi satu hasil.
ambil (n) baca nilai n dari aliran dan berhenti berlangganan.
Biasanya, kita akan mempunyai pelbagai aliran yang perlu digabungkan. Terdapat banyak cara untuk menggabungkan sungai, tetapi ada yang kelihatan lebih kerap daripada yang lain.
untuk terus memperluaskan analogi Facebook Messenger, Switch () adalah anda ... dengan baik, togol orang yang anda balas berdasarkan siapa yang sedang menghantar mesej.
Dalam kes pertama, kita perlu membuat aliran yang memulakan permintaan rangkaian menggunakan yang berikut:
rxjs adalah lebih daripada apa yang kita lihat di sini, tetapi itu cukup untuk pergi jauh.
RXJS adalah perpustakaan pengaturcaraan reaktif menggunakan objek yang dapat dilihat untuk memudahkan gabungan kod asynchronous atau callback. Ini dibandingkan dengan menggunakan JavaScript tradisional dengan gaya pengaturcaraan yang lebih penting. Perbezaan utama ialah bagaimana mereka memproses data -RXJS merawat data sebagai aliran, yang boleh dikendalikan dan diubah menggunakan pelbagai pengendali, sementara JavaScript tradisional memproses data dengan cara yang lebih linear.
Bagaimana untuk membuat objek yang dapat dilihat dalam RXJS?
Apakah pengendali utama dalam RXJS dan bagaimana mereka bekerja?
Bagaimana menangani kesilapan dalam RXJS?
Bagaimana membatalkan langganan objek yang dapat dilihat dalam RXJS?
Apakah perbezaan antara objek yang dapat dilihat dengan sederhana dan objek yang dapat dilihat sejuk?
Bagaimana untuk menggabungkan pelbagai objek yang dapat dilihat dalam RXJS?
Apakah tujuan tema dalam RXJS?
Bagaimana menggunakan RXJS dengan sudut?
Apakah beberapa kes penggunaan biasa untuk RXJS?
Rumah hujung hadapan web tutorial js 10 fungsi RXJS yang perlu diketahui dengan contoh

10 fungsi RXJS yang perlu diketahui dengan contoh

Feb 17, 2025 am 10:08 AM

10 Need-to-Know RxJS Functions with Examples

Artikel ini dikaji semula oleh Florian Rappl dan Moritz Kröger. Terima kasih kepada semua pengulas rakan sebaya di SitePoint untuk membuat kandungan SitePoint sempurna!

Sebagai minat dalam pengaturcaraan reaktif berfungsi (FRP) tumbuh, RXJS telah menjadi salah satu perpustakaan JavaScript yang paling popular dalam paradigma ini. Dalam artikel ini, kami akan meneroka sepuluh fungsi mesti tahu dalam RXJS.

Nota: Artikel ini mengandaikan bahawa anda sudah biasa dengan asas -asas RXJS, seperti yang diterangkan dalam artikel "Bermula dengan pengaturcaraan reaktif berfungsi dengan RXJS".

mata utama

    RXJS memanfaatkan objek yang dapat dilihat sama dengan array yang diisi dari masa ke masa untuk memudahkan pengaturcaraan reaktif berfungsi (FRP), yang membolehkan pengendalian kesilapan yang lebih deklaratif dan kuat dalam aplikasi.
  • Operasi teras aliran mudah dalam RXJS, seperti
  • , map(), filter(), dan reduce(), operasi array cermin, tetapi digunakan untuk aliran nombor yang memancarkan nilai dari masa ke masa. take()
  • Fungsi khas seperti
  • dan flatMap() adalah penting untuk mengendalikan struktur data yang kompleks dan menguruskan pelbagai aliran secara berasingan, menjadikannya kritikal untuk tugas pengaturcaraan reaktif lanjutan. switch()
  • Pengendali seperti
  • , concat() dan merge() boleh digunakan untuk menggabungkan pelbagai aliran, masing -masing memainkan peranan yang berbeza dalam pengurusan aliran dan penyegerakan data. combineLatest() Fungsi
  • menyediakan mekanisme berdasarkan keadaan luaran untuk berhenti berlangganan, yang menggambarkan fleksibiliti RXJ dalam kawalan aliran dan pengurusan sumber. takeUntil()
pengaturcaraan reaktif

Pengaturcaraan reaktif adalah paradigma pengaturcaraan yang mengambil aliran data yang dipanggil objek yang dapat dilihat sebagai unit pengaturcaraan asasnya.

Objek Stream -atau yang boleh dilihat dalam Jargon -sama -sama pendengar acara: Kedua -duanya menunggu sesuatu yang berlaku dan memberitahu anda apabila ia berlaku. Satu siri pemberitahuan asynchronous yang diperoleh dari pendengar onclick adalah contoh sempurna aliran data.

Dengan kata lain, objek yang dapat dilihat tidak lebih daripada array yang diisi dari masa ke masa.

Unsur -unsur array ini boleh datang dari hampir mana -mana sahaja: sistem fail, peristiwa DOM, panggilan API, dan juga data segerak yang ditukar seperti tatasusunan. Secara asasnya, pengaturcaraan reaktif tidak lebih daripada menggunakan objek yang dapat dilihat sebagai blok bangunan program.

Hubungan dengan Array

array adalah mudah kerana kandungan mereka adalah muktamad melainkan jika berubah secara eksplisit. Dalam pengertian ini, tidak ada temporalitas penting dalam array.

Sebaliknya, objek yang dapat dilihat ditakrifkan oleh masa. Paling banyak anda boleh tahu bahawa aliran telah diterima setakat ini [1, 2, 3]. Anda tidak dapat memastikan jika anda akan mendapat 4 -atau tidak -dan ia adalah sumber data, bukan program anda, yang menentukannya.

Hubungan antara aliran dan tatasusunan sangat mendalam bahawa kebanyakan sambungan reaktif berasal dari dunia pengaturcaraan berfungsi, di mana operasi senarai adalah teras.

biasa dengan rxjs

Pertimbangkan aplikasi tugas biasa. Mari lihat persoalan bagaimana untuk memaparkan nama tugas yang belum selesai pengguna menggunakan RXJS:

const task_stream =
  // 创建所有数据库中任务的流
  getTasks().
    // 只获取此用户的任务
    filter((task) => task.user_id == user_id).
    // 获取未完成的任务
    filter((task) => !task.completed).
    // 只获取任务名称
    map((task) => task.name)

/* 任务如下所示:
   task = {
    user_id   : number,
    completed : boolean,
    name      : string
   }
 */
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

Setakat ini, ini hanyalah lanjutan array, tetapi ia menunjukkan gaya fungsi pengaturcaraan reaktif.

Sifat deklaratif menjadi jelas dengan menambahkan fungsi yang lebih kompleks, "dunia nyata". Katakan kita mahu:

  • Memulakan permintaan sebagai tindak balas kepada pilihan pengguna untuk melihat tugas yang lengkap atau belum selesai;
  • Hantar hanya sekali permintaan kedua ke pemilihan terakhir untuk mengelakkan lebar jalur membuang -buang apabila pengguna dengan cepat mengubah pemilihan;
  • Cuba semula sehingga tiga permintaan gagal;
  • mengecat pandangan hanya jika pelayan menghantar respons yang berbeza daripada kali terakhir.
  • Steply terurai:
const task_stream =
  parameter_stream.
    debounce(1000).
    map((parameter) => {
      getTasks().
        retry(3).
        filter((task) => task.user_id === user_id).
        filter((task) => task.completed === parameter).
        map((task)    => task.name)
    }).
    flatMap(Rx.Observable.from).
    distinctUntilChanged().
    update()
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

Parameter_Stream memberitahu kami sama ada pengguna mahu menyelesaikan tugas atau belum selesai dan menyimpan pemilihan dalam parameter;

Debounce () Pastikan kami hanya memberi tumpuan kepada butang terakhir klik sesaat;
    Bahagian di sekitar getTasks () adalah sama seperti sebelumnya;
  • DistinctUndilChanged () memastikan bahawa kita hanya mengikuti respons pelayan yang berbeza daripada yang terakhir; dan
  • kemas kini () bertanggungjawab untuk mengemas kini UI untuk mencerminkan apa yang kami dapat dari pelayan.
  • Mengendalikan debounce, cuba semula, dan "berbeza sehingga berubah" logik dalam gaya yang penting, berasaskan panggilan balik adalah berkesan, tetapi ia adalah rapuh dan kompleks.
  • Kunci ialah pengaturcaraan menggunakan RXJS membolehkan:
Program Deklarasi;

sistem berskala;

pengendalian ralat mudah, langsung dan kuat.

    Dalam proses melayari sepuluh fungsi mesti tahu RXJS, kita akan menghadapi setiap fungsi dalam contoh di atas.
  1. Operasi aliran mudah
  2. Fungsi asas aliran mudah (aliran yang memancarkan nilai mudah, seperti rentetan) termasuk:
peta ()

penapis ()

Kurangkan ()

ambil () / takeWhile ()
  • Selain mengambil () dan TakeWhile (), ini serupa dengan fungsi array pesanan tinggi JavaScript.
  • kami akan menggunakan fungsi ini dengan menyelesaikan masalah contoh: Cari semua pengguna dalam pangkalan data dengan laman web .com atau .org dan hitung panjang purata nama laman web mereka.
  • JsonPlaceholder akan berfungsi sebagai sumber pengguna kami. Ini adalah perwakilan JSON data pengguna yang akan kami gunakan.
  • 1.
Menggunakan peta () pada objek yang boleh dilihat adalah sama seperti menggunakannya pada array. IT:

menerima panggilan balik sebagai parameter;

Jalankannya pada setiap elemen array yang anda panggil;

Mengembalikan array baru di mana setiap elemen array asal digantikan oleh hasil yang dihasilkan oleh panggilan balik di atasnya.

satu -satunya perbezaan apabila menggunakan peta () pada objek yang dapat dilihat ialah:

    Ia mengembalikan objek baru yang boleh dilihat, bukan array baru;
  1. Ia dilaksanakan apabila objek yang dapat dilihat mengeluarkan projek baru, dan bukannya segera.
  2. kita boleh menggunakan peta () untuk menukar aliran data pengguna kami ke dalam senarai yang hanya mengandungi nama laman web mereka:
  3. const task_stream =
      // 创建所有数据库中任务的流
      getTasks().
        // 只获取此用户的任务
        filter((task) => task.user_id == user_id).
        // 获取未完成的任务
        filter((task) => !task.completed).
        // 只获取任务名称
        map((task) => task.name)
    
    /* 任务如下所示:
       task = {
        user_id   : number,
        completed : boolean,
        name      : string
       }
     */
    Salin selepas log masuk
    Salin selepas log masuk
    Salin selepas log masuk
    Salin selepas log masuk
    Salin selepas log masuk

    di sini, kami menggunakan peta untuk menggantikan setiap objek pengguna dalam aliran masuk dengan setiap laman web pengguna.

    rxjs juga membolehkan anda memanggil peta () sebagai pilih (). Kedua -dua nama merujuk kepada fungsi yang sama.

    2

    seperti peta (), penapis () tidak kira peranan yang sama pada objek yang dapat dilihat seperti pada tatasusunan. Untuk mencari setiap pengguna dengan alamat laman web .net atau .org, kami boleh menulis ini:

    const task_stream =
      parameter_stream.
        debounce(1000).
        map((parameter) => {
          getTasks().
            retry(3).
            filter((task) => task.user_id === user_id).
            filter((task) => task.completed === parameter).
            map((task)    => task.name)
        }).
        flatMap(Rx.Observable.from).
        distinctUntilChanged().
        update()
    Salin selepas log masuk
    Salin selepas log masuk
    Salin selepas log masuk
    Salin selepas log masuk
    Salin selepas log masuk
    Ini hanya akan memilih pengguna yang laman webnya berakhir dengan "bersih" atau "org".

    penapis () juga mempunyai alias di mana ().

    3.

    Kurangkan () membolehkan kita menggunakan semua nilai tunggal dan mengubahnya menjadi satu hasil.

    mengurangkan () sering merupakan operasi senarai asas yang paling membingungkan, kerana tidak seperti penapis () atau peta (), tingkah lakunya berbeza dengan penggunaan.

    Biasanya, mengurangkan () mengambil koleksi nilai dan menukarkannya ke dalam satu titik data. Dalam contoh kami, kami akan menyediakannya dengan aliran nama laman web dan menggunakan mengurangkan () untuk menukar aliran itu menjadi objek yang mengira jumlah bilangan laman web yang kami dapati dan panjang namanya.

    di sini, kami memudahkan aliran ke objek tunggal, yang menjejaki:
    source.
      map((user) => user.website)
    Salin selepas log masuk
    Salin selepas log masuk
    Salin selepas log masuk

    berapa banyak laman web yang kita lihat;
      Jumlah panjang semua nama.
    1. ingat bahawa mengurangkan () mengembalikan hasilnya hanya apabila objek sumber yang dapat dilihat selesai. Jika anda ingin mengetahui status penumpuk setiap kali aliran menerima item baru, gunakan imbasan () sebaliknya.
    4.

    ambil () dan takeWhile () melengkapkan fungsi asas aliran mudah.

    ambil (n) baca nilai n dari aliran dan berhenti berlangganan.

    kita boleh menggunakan imbasan () untuk memancarkan objek kami setiap kali kami menerima laman web, dan hanya mengambil () dua nilai pertama.

    rxjs juga menyediakan TakeWhile (), yang membolehkan anda mendapatkan nilai sebelum ujian Boolean tertentu ditubuhkan. Kita boleh menggunakan TakeWhile () untuk menulis aliran di atas seperti ini:

    source.
      map((user) => user.website).
      filter((website) => (website.endsWith('net') || website.endsWith('org'));
    })
    Salin selepas log masuk
    Salin selepas log masuk
    Operasi aliran pesanan tinggi

    Fungsi -fungsi ini hampir sama dengan operasi senarai biasa kecuali mereka bekerja pada objek yang dapat dilihat dan bukannya tatasusunan.
    source.
      map((user) => user.website).
      filter((website) => (website.endsWith('net') || website.endsWith('org'))).
      reduce((data, website) => {
        return {
          count       : data.count += 1,
          name_length : data.name_length += website.length
        }
      }, { count : 0, name_length : 0 })
    Salin selepas log masuk

    "[i] f Anda tahu bagaimana untuk program terhadap tatasusunan menggunakan array#tambahan, maka anda sudah tahu cara menggunakan rxjs!"

    Sama seperti array boleh mengandungi data yang lebih kompleks daripada nilai mudah (seperti array atau objek), objek yang dapat dilihat juga boleh memancarkan data pesanan yang lebih tinggi, seperti janji atau objek lain yang dapat dilihat. Di sinilah alat yang lebih profesional dimainkan.

    5.

    ... Malah, kita sudah menggunakannya!

    Apabila kita menentukan aliran sumber, kita panggil daripromise () dan flatmap ():

    Ini menggunakan tiga mekanisme baru:

    daripromise;

    rx.observable.from;
    source.
      map((user) => user.website).
      filter((website) => (website.endsWith('net') || website.endsWith('org'))).
      scan((data, website) => {
          return {
            count       : data.count += 1,
            name_length : data.name_length += website.length
          }
        }, { count : 0, name_length : 0 }).
      take(2);
    Salin selepas log masuk
    flatmap.

      objek yang dapat dilihat dari janji
    1. Janji mewakili satu nilai masa depan yang kita akan mendapat asynchronously -contohnya, hasil panggilan ke pelayan.
    2. Ciri -ciri yang menentukan

      janji adalah bahawa ia hanya mewakili nilai masa depan. Ia tidak boleh mengembalikan pelbagai data tak segerak;

      Ini bermakna apabila kita menggunakan rx.observable.frompromise () kita mendapat objek yang dapat dilihat yang memancarkan nilai tunggal -atau:

      1. nilai yang dihuraikan kepada janji; atau
      2. Janji ditolak nilai.

      Apabila janji mengembalikan rentetan atau nombor, kita tidak perlu melakukan sesuatu yang istimewa. Walau bagaimanapun, apabila ia mengembalikan array (yang mana dalam kes kita), kita lebih suka membuat objek yang dapat dilihat yang memancarkan kandungan array dan bukannya array itu sendiri sebagai satu nilai.

      6

      Proses ini dipanggil meratakan, yang flatmap () proses. Ia mempunyai banyak beban, tetapi kami hanya menggunakan beban yang paling mudah dan paling biasa digunakan.

      Apabila menggunakan flatmap (), kita:

        panggil flatmap () pada objek yang dapat dilihat yang mengeluarkan resolusi tunggal atau penolakan janji;
      1. Lulus fungsi untuk membuat objek yang boleh dilihat baru.
      2. Dalam contoh kami, kami lulus rx.observable.from (), yang mewujudkan urutan dari nilai -nilai array:

      Ini merangkumi kod dalam pengantar pendek kami:
      const task_stream =
        // 创建所有数据库中任务的流
        getTasks().
          // 只获取此用户的任务
          filter((task) => task.user_id == user_id).
          // 获取未完成的任务
          filter((task) => !task.completed).
          // 只获取任务名称
          map((task) => task.name)
      
      /* 任务如下所示:
         task = {
          user_id   : number,
          completed : boolean,
          name      : string
         }
       */
      Salin selepas log masuk
      Salin selepas log masuk
      Salin selepas log masuk
      Salin selepas log masuk
      Salin selepas log masuk

      rxjs juga menyediakan alias untuk flatmap (): selectMany ().
      const task_stream =
        parameter_stream.
          debounce(1000).
          map((parameter) => {
            getTasks().
              retry(3).
              filter((task) => task.user_id === user_id).
              filter((task) => task.completed === parameter).
              map((task)    => task.name)
          }).
          flatMap(Rx.Observable.from).
          distinctUntilChanged().
          update()
      Salin selepas log masuk
      Salin selepas log masuk
      Salin selepas log masuk
      Salin selepas log masuk
      Salin selepas log masuk

      Menggabungkan pelbagai aliran

      Biasanya, kita akan mempunyai pelbagai aliran yang perlu digabungkan. Terdapat banyak cara untuk menggabungkan sungai, tetapi ada yang kelihatan lebih kerap daripada yang lain.

      7.

      Sambungan dan gabungan adalah dua cara yang paling biasa untuk menggabungkan sungai.

      Sambungan mencipta aliran baru dengan memancarkan nilai aliran pertama sehingga selesai dan kemudian memancarkan nilai aliran kedua.

      gabungan mencipta aliran baru dari pelbagai aliran dengan memancarkan nilai mana -mana aliran aktif

      Fikirkan tentang bercakap dengan dua orang pada masa yang sama di Facebook Messenger. Concat () adalah situasi di mana anda menerima mesej dari kedua -dua pihak tetapi melengkapkan perbualan dengan satu orang sebelum membalas kepada orang lain. Gabungan () adalah seperti membuat sembang kumpulan dan menerima dua aliran mesej pada masa yang sama.

      Aliran

      concat () akan mencetak semua nilai sumber1 dan hanya akan mula mencetak nilai Source2 selepas Source1 selesai.

      source.
        map((user) => user.website)
      Salin selepas log masuk
      Salin selepas log masuk
      Salin selepas log masuk
      menggabungkan () aliran akan mencetak nilai Source1 dan Source2 mengikut urutan yang diterima: ia tidak menunggu aliran pertama selesai sebelum memancarkan nilai aliran kedua.

      8

      Biasanya, kami ingin mendengar objek yang dapat dilihat yang memancarkan objek yang dapat dilihat, tetapi hanya memberi tumpuan kepada pelepasan terkini dari sumber.

      untuk terus memperluaskan analogi Facebook Messenger, Switch () adalah anda ... dengan baik, togol orang yang anda balas berdasarkan siapa yang sedang menghantar mesej.

      Untuk tujuan ini, RXJS menyediakan suis.

      Antara muka pengguna menyediakan beberapa kes penggunaan yang baik untuk suis (). Jika permohonan kami membuat permintaan setiap kali pengguna memilih apa yang mereka mahu cari, kami boleh mengandaikan bahawa mereka hanya mahu melihat hasil pemilihan terkini. Oleh itu, kami menggunakan Switch () untuk mendengar hanya untuk hasil pemilihan terkini.

      Dengan cara ini, kita harus pastikan tidak membazirkan jalur lebar dan hanya pilih akses ke pelayan untuk kali terakhir pengguna membuat setiap saat. Fungsi yang kami gunakan untuk ini dipanggil debounce ()

      Jika anda mahu pergi ke arah yang lain dan hanya ikuti pilihan pertama, anda boleh menggunakan Throttle (). Ia mempunyai API yang sama, tetapi berkelakuan sebaliknya.

      9

      Bagaimana jika kita mahu membenarkan pengguna mencari jawatan atau pengguna dengan ID tertentu?

      Untuk demonstrasi, kami akan membuat menu drop-down yang lain dan membolehkan pengguna memilih ID item yang mereka mahu ambil.

      Terdapat dua situasi. Apabila Pengguna:

        Tukar sebarang pilihan;
      1. Tukar dua pilihan.
      2. bertindak balas terhadap sebarang tahap perubahan menggunakan combinelatest ()

      Dalam kes pertama, kita perlu membuat aliran yang memulakan permintaan rangkaian menggunakan yang berikut:

      Pemilihan akhir titik akhir pengguna;
        ID baru -baru ini dipilih oleh pengguna.
      1. ... dan lakukan ini apabila pengguna mengemas kini sebarang pilihan.
      inilah yang combinelatest () adalah untuk:

      Apabila mana -mana aliran memancarkan nilai, CombinElatest () mengambil nilai yang dipancarkan dan berpasangan dengan item terakhir yang dipancarkan oleh aliran lain dan mengeluarkan pasangan itu sebagai array.

      const task_stream =
        // 创建所有数据库中任务的流
        getTasks().
          // 只获取此用户的任务
          filter((task) => task.user_id == user_id).
          // 获取未完成的任务
          filter((task) => !task.completed).
          // 只获取任务名称
          map((task) => task.name)
      
      /* 任务如下所示:
         task = {
          user_id   : number,
          completed : boolean,
          name      : string
         }
       */
      Salin selepas log masuk
      Salin selepas log masuk
      Salin selepas log masuk
      Salin selepas log masuk
      Salin selepas log masuk
      Ini lebih mudah untuk digambarkan dalam carta:

      Gunakan zip untuk bertindak balas hanya kepada perubahan dalam dua aliran

      const task_stream =
        parameter_stream.
          debounce(1000).
          map((parameter) => {
            getTasks().
              retry(3).
              filter((task) => task.user_id === user_id).
              filter((task) => task.completed === parameter).
              map((task)    => task.name)
          }).
          flatMap(Rx.Observable.from).
          distinctUntilChanged().
          update()
      Salin selepas log masuk
      Salin selepas log masuk
      Salin selepas log masuk
      Salin selepas log masuk
      Salin selepas log masuk
      jadi tunggu sehingga pengguna mengemas kini pemilihan bidang ID dan titik akhir, menggantikan CombinElatest () dengan zip ().

      sekali lagi, ini lebih mudah difahami dalam carta:

      Tidak seperti CombinElatest (), zip () akan menunggu sehingga kedua -dua objek yang dapat dilihat memancarkan kandungan baru sebelum menghantar pelbagai nilai yang dikemas kini.

      source.
        map((user) => user.website)
      Salin selepas log masuk
      Salin selepas log masuk
      Salin selepas log masuk
      10

      Akhirnya, TakeUntil () membolehkan kita mendengar aliran pertama sehingga aliran kedua mula memancarkan nilai.

      Ini berguna apabila anda perlu menyelaraskan sungai tetapi tidak perlu menggabungkannya.

      Ringkasan
      source.
        map((user) => user.website).
        filter((website) => (website.endsWith('net') || website.endsWith('org'));
      })
      Salin selepas log masuk
      Salin selepas log masuk

      Hanya menambah dimensi masa ke array membuka pintu kepada pemikiran baru mengenai program.

      rxjs adalah lebih daripada apa yang kita lihat di sini, tetapi itu cukup untuk pergi jauh.

      Mulakan dengan RXJS Lite, bersedia untuk merujuk kepada dokumentasi dan luangkan masa untuk melakukannya. Sebelum anda tahu, semuanya akan kelihatan seperti sungai ... kerana semuanya.

      Soalan Lazim Mengenai Fungsi RXJS (FAQ)

      Apakah perbezaan utama antara RXJS dan JavaScript tradisional?

      RXJS adalah perpustakaan pengaturcaraan reaktif menggunakan objek yang dapat dilihat untuk memudahkan gabungan kod asynchronous atau callback. Ini dibandingkan dengan menggunakan JavaScript tradisional dengan gaya pengaturcaraan yang lebih penting. Perbezaan utama ialah bagaimana mereka memproses data -RXJS merawat data sebagai aliran, yang boleh dikendalikan dan diubah menggunakan pelbagai pengendali, sementara JavaScript tradisional memproses data dengan cara yang lebih linear.

      Bagaimana untuk membuat objek yang dapat dilihat dalam RXJS?

      Dalam RXJS, anda boleh membuat objek yang boleh dilihat menggunakan pembina baru () yang baru. Pembina ini mengambil fungsi sebagai hujah, yang dipanggil fungsi pelanggan, yang dilaksanakan apabila pada mulanya melanggan objek yang dapat dilihat. Berikut adalah contoh asas:

      const task_stream =
        // 创建所有数据库中任务的流
        getTasks().
          // 只获取此用户的任务
          filter((task) => task.user_id == user_id).
          // 获取未完成的任务
          filter((task) => !task.completed).
          // 只获取任务名称
          map((task) => task.name)
      
      /* 任务如下所示:
         task = {
          user_id   : number,
          completed : boolean,
          name      : string
         }
       */
      Salin selepas log masuk
      Salin selepas log masuk
      Salin selepas log masuk
      Salin selepas log masuk
      Salin selepas log masuk

      Apakah pengendali utama dalam RXJS dan bagaimana mereka bekerja?

      RXJS mempunyai pelbagai pengendali yang boleh digunakan untuk mengawal bagaimana aliran data antara objek dan pemerhati yang dapat dilihat. Beberapa pengendali utama termasuk peta (), penapis (), mengurangkan (), menggabungkan (), dan concat (). Setiap pengendali ini mengendalikan aliran data dengan cara yang berbeza, seperti menukar data, menapis nilai tertentu, atau menggabungkan pelbagai aliran.

      Bagaimana menangani kesilapan dalam RXJS?

      rxjs menyediakan beberapa pengendali yang mengendalikan kesilapan, seperti catchError (), cuba semula (), dan retrywhen (). Pengendali penangkapan () digunakan untuk menangkap kesilapan pada aliran yang dapat dilihat dan mengembalikan objek baru yang dapat dilihat atau membuang kesilapan. Pengendali semula () boleh digunakan untuk menyerahkan semula objek yang boleh dilihat sekiranya berlaku ralat. Pengendali semula () adalah sama, tetapi ia memberikan lebih banyak kawalan ke atas apabila cuba semula.

      Bagaimana membatalkan langganan objek yang dapat dilihat dalam RXJS?

      Apabila anda melanggan yang dapat dilihat, anda menerima langganan yang mempunyai kaedah berhenti berlangganan (). Anda boleh memanggil kaedah ini untuk membatalkan pelaksanaan objek yang dapat dilihat dan membersihkan sebarang sumber yang sedang digunakan. Berikut adalah contoh:

      const task_stream =
        parameter_stream.
          debounce(1000).
          map((parameter) => {
            getTasks().
              retry(3).
              filter((task) => task.user_id === user_id).
              filter((task) => task.completed === parameter).
              map((task)    => task.name)
          }).
          flatMap(Rx.Observable.from).
          distinctUntilChanged().
          update()
      Salin selepas log masuk
      Salin selepas log masuk
      Salin selepas log masuk
      Salin selepas log masuk
      Salin selepas log masuk

      Apakah perbezaan antara objek yang dapat dilihat dengan sederhana dan objek yang dapat dilihat sejuk?

      Dalam RXJS, objek yang dapat dilihat boleh menjadi panas atau sejuk. Pemantauan sejuk mula berjalan apabila dilanggan, sementara pemerhatian panas menghasilkan nilai walaupun sebelum melanggan. Dalam erti kata lain, objek yang dapat dilihat sejuk tidak aktif, manakala objek yang boleh dilihat panas tidak.

      Bagaimana untuk menggabungkan pelbagai objek yang dapat dilihat dalam RXJS?

      RXJS menyediakan beberapa pengendali yang menggabungkan pelbagai objek yang dapat dilihat, seperti gabungan (), concat (), combinelatest (), dan zip (). Setiap pengendali ini menggabungkan aliran data dengan cara yang berbeza, bergantung kepada keperluan khusus anda.

      Apakah tujuan tema dalam RXJS?

      Topik dalam RXJS adalah jenis objek yang boleh dilihat khas yang membolehkan multicasting nilai kepada pelbagai pemerhati. Tidak seperti objek yang boleh dilihat biasa, topik mengekalkan pendaftaran untuk banyak pendengar.

      Bagaimana menggunakan RXJS dengan sudut?

      Sudut menyokong RXJS dalam dibina dan menggunakannya secara dalaman untuk pelbagai fungsi. Anda juga boleh menggunakan RXJS dalam kod anda sendiri untuk mengendalikan operasi asynchronous dan melaksanakan fungsi seperti penyelesaian automatik, de-jitter, pendikit, pengundian, dll.

      Apakah beberapa kes penggunaan biasa untuk RXJS?

      RXJS boleh digunakan dalam pelbagai senario di mana data tak segerak diperlukan. Beberapa kes penggunaan biasa termasuk mengendalikan input pengguna, membuat permintaan HTTP, menggunakan websocket, dan mengendalikan animasi.

      Atas ialah kandungan terperinci 10 fungsi RXJS yang perlu diketahui dengan contoh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Apa yang perlu saya lakukan jika saya menghadapi percetakan kod yang dihiasi untuk resit kertas terma depan? Apa yang perlu saya lakukan jika saya menghadapi percetakan kod yang dihiasi untuk resit kertas terma depan? Apr 04, 2025 pm 02:42 PM

Soalan dan penyelesaian yang sering ditanya untuk percetakan tiket kertas terma depan dalam pembangunan front-end, percetakan tiket adalah keperluan umum. Walau bagaimanapun, banyak pemaju sedang melaksanakan ...

Demystifying JavaScript: Apa yang berlaku dan mengapa penting Demystifying JavaScript: Apa yang berlaku dan mengapa penting Apr 09, 2025 am 12:07 AM

JavaScript adalah asas kepada pembangunan web moden, dan fungsi utamanya termasuk pengaturcaraan yang didorong oleh peristiwa, penjanaan kandungan dinamik dan pengaturcaraan tak segerak. 1) Pengaturcaraan yang didorong oleh peristiwa membolehkan laman web berubah secara dinamik mengikut operasi pengguna. 2) Penjanaan kandungan dinamik membolehkan kandungan halaman diselaraskan mengikut syarat. 3) Pengaturcaraan Asynchronous memastikan bahawa antara muka pengguna tidak disekat. JavaScript digunakan secara meluas dalam interaksi web, aplikasi satu halaman dan pembangunan sisi pelayan, sangat meningkatkan fleksibiliti pengalaman pengguna dan pembangunan silang platform.

Siapa yang dibayar lebih banyak Python atau JavaScript? Siapa yang dibayar lebih banyak Python atau JavaScript? Apr 04, 2025 am 12:09 AM

Tidak ada gaji mutlak untuk pemaju Python dan JavaScript, bergantung kepada kemahiran dan keperluan industri. 1. Python boleh dibayar lebih banyak dalam sains data dan pembelajaran mesin. 2. JavaScript mempunyai permintaan yang besar dalam perkembangan depan dan stack penuh, dan gajinya juga cukup besar. 3. Faktor mempengaruhi termasuk pengalaman, lokasi geografi, saiz syarikat dan kemahiran khusus.

Bagaimana untuk menggabungkan elemen array dengan ID yang sama ke dalam satu objek menggunakan JavaScript? Bagaimana untuk menggabungkan elemen array dengan ID yang sama ke dalam satu objek menggunakan JavaScript? Apr 04, 2025 pm 05:09 PM

Bagaimana cara menggabungkan elemen array dengan ID yang sama ke dalam satu objek dalam JavaScript? Semasa memproses data, kita sering menghadapi keperluan untuk mempunyai id yang sama ...

Adakah JavaScript sukar belajar? Adakah JavaScript sukar belajar? Apr 03, 2025 am 12:20 AM

Pembelajaran JavaScript tidak sukar, tetapi ia mencabar. 1) Memahami konsep asas seperti pembolehubah, jenis data, fungsi, dan sebagainya. 2) Pengaturcaraan asynchronous tuan dan melaksanakannya melalui gelung acara. 3) Gunakan operasi DOM dan berjanji untuk mengendalikan permintaan tak segerak. 4) Elakkan kesilapan biasa dan gunakan teknik debugging. 5) Mengoptimumkan prestasi dan mengikuti amalan terbaik.

Bagaimana untuk mencapai kesan menatal paralaks dan kesan animasi elemen, seperti laman web rasmi Shiseido?
atau:
Bagaimanakah kita dapat mencapai kesan animasi yang disertai dengan menatal halaman seperti laman web rasmi Shiseido? Bagaimana untuk mencapai kesan menatal paralaks dan kesan animasi elemen, seperti laman web rasmi Shiseido? atau: Bagaimanakah kita dapat mencapai kesan animasi yang disertai dengan menatal halaman seperti laman web rasmi Shiseido? Apr 04, 2025 pm 05:36 PM

Perbincangan mengenai realisasi kesan animasi tatal dan elemen Parallax dalam artikel ini akan meneroka bagaimana untuk mencapai yang serupa dengan laman web rasmi Shiseido (https://www.shiseido.co.jp/sb/wonderland/) ... ...

Evolusi JavaScript: Trend Semasa dan Prospek Masa Depan Evolusi JavaScript: Trend Semasa dan Prospek Masa Depan Apr 10, 2025 am 09:33 AM

Trend terkini dalam JavaScript termasuk kebangkitan TypeScript, populariti kerangka dan perpustakaan moden, dan penerapan webassembly. Prospek masa depan meliputi sistem jenis yang lebih berkuasa, pembangunan JavaScript, pengembangan kecerdasan buatan dan pembelajaran mesin, dan potensi pengkomputeran IoT dan kelebihan.

Perbezaan dalam Konsol.Log Output Result: Mengapa kedua -dua panggilan berbeza? Perbezaan dalam Konsol.Log Output Result: Mengapa kedua -dua panggilan berbeza? Apr 04, 2025 pm 05:12 PM

Perbincangan mendalam mengenai punca-punca utama perbezaan dalam output konsol.log. Artikel ini akan menganalisis perbezaan hasil output fungsi Console.log dalam sekeping kod dan menerangkan sebab -sebab di belakangnya. � ...

See all articles