RxJS - Dapat diamati

Observable adalah fungsi yang membuat pengamat dan melampirkannya ke sumber tempat nilai diharapkan, misalnya, klik, peristiwa mouse dari elemen dom atau permintaan Http, dll.

Observer is an object with callback functions, yang akan dipanggil ketika ada interaksi ke Observable, yaitu, sumber telah berinteraksi untuk contoh klik tombol, permintaan Http, dll.

Kami akan membahas topik berikut di bab ini -

• Buat Observable
• Berlangganan Observable
• Jalankan Observable

Buat Observable

Observable dapat dibuat menggunakan konstruktor yang dapat diamati dan juga menggunakan metode create yang dapat diamati dan dengan meneruskan fungsi subscribe sebagai argumennya seperti yang ditunjukkan di bawah ini -

testrx.js

import { Observable } from 'rxjs';

var observable = new Observable(
   function subscribe(subscriber) {
      subscriber.next("My First Observable")
   }
);

Kami telah membuat observable dan menambahkan pesan "My First Observable" menggunakan subscriber.next metode yang tersedia di dalam Observable.

Kita juga bisa membuat metode Observable menggunakan, Observable.create () seperti yang ditunjukkan di bawah ini -

testrx.js

import { Observable } from 'rxjs';
var observer = Observable.create(
   function subscribe(subscriber) {
      subscriber.next("My First Observable")
   }
);

Berlangganan Observable

Anda dapat berlangganan observable sebagai berikut -

testrx.js

import { Observable } from 'rxjs';

var observer = new Observable(
   function subscribe(subscriber) {
      subscriber.next("My First Observable")
   }
);
observer.subscribe(x => console.log(x));

Ketika pengamat berlangganan, itu akan memulai eksekusi Pengamatan.

Inilah yang kami lihat di konsol browser -

Jalankan Observable

Sebuah observable akan dieksekusi saat itu berlangganan. Seorang pengamat adalah sebuah objek dengan tiga metode yang diberitahukan,

next() - Metode ini akan mengirim nilai seperti angka, string, objek, dll.

complete() - Metode ini tidak akan mengirimkan nilai apa pun dan menunjukkan yang dapat diamati sebagai selesai.

error() - Metode ini akan mengirimkan kesalahan jika ada.

Mari kita buat observable dengan ketiga notifikasi dan jalankan hal yang sama.

testrx.js

import { Observable } from 'rxjs';
var observer = new Observable(
   function subscribe(subscriber) {
      try {
         subscriber.next("My First Observable");
         subscriber.next("Testing Observable");
         subscriber.complete();
      } catch(e){
         subscriber.error(e);
      }
   }
);
observer.subscribe(x => console.log(x), (e)=>console.log(e), 
   ()=>console.log("Observable is complete"));

Pada kode di atas, kami telah menambahkan metode next, complete dan error.

try{
   subscriber.next("My First Observable");
   subscriber.next("Testing Observable");
   subscriber.complete();
} catch(e){
   subscriber.error(e);
}

Untuk mengeksekusi selanjutnya, complete dan error, kita harus memanggil metode subscribe seperti yang ditunjukkan di bawah ini -

observer.subscribe(x => console.log(x), (e)=>console.log(e), 
   ()=>console.log("Observable is complete"));

Metode kesalahan hanya akan dipanggil jika ada kesalahan.

Ini adalah keluaran yang terlihat di browser -