RxJS - Có thể quan sát

Có thể quan sát là một hàm tạo trình quan sát và gắn nó vào nguồn nơi các giá trị được mong đợi từ đó, ví dụ: nhấp chuột, sự kiện chuột từ phần tử dom hoặc yêu cầu Http, v.v.

Observer is an object with callback functions, điều đó sẽ được gọi khi có tương tác với Observable, tức là nguồn đã tương tác cho một lần nhấp vào nút ví dụ, yêu cầu Http, v.v.

Chúng ta sẽ thảo luận về các chủ đề sau trong chương này -

  • Tạo có thể quan sát
  • Đăng ký có thể quan sát
  • Thực thi có thể quan sát

Tạo có thể quan sát

Có thể tạo hàm tạo có thể quan sát bằng cách sử dụng hàm tạo có thể quan sát và cũng sử dụng phương thức tạo có thể quan sát và bằng cách chuyển hàm subscribe làm đối số cho nó như hình dưới đây:

testrx.js

import { Observable } from 'rxjs';

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

Chúng tôi đã tạo một thông báo có thể quan sát và thêm một thông báo “Có thể quan sát đầu tiên của tôi” bằng cách sử dụng subscriber.next phương thức có sẵn bên trong Observable.

Chúng ta cũng có thể tạo phương thức Observable.create () bằng cách sử dụng, như hình dưới đây:

testrx.js

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

Đăng ký có thể quan sát

Bạn có thể đăng ký để quan sát như sau:

testrx.js

import { Observable } from 'rxjs';

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

Khi người quan sát được đăng ký, nó sẽ bắt đầu thực thi Người quan sát.

Đây là những gì chúng ta thấy trong bảng điều khiển của trình duyệt -

Thực thi có thể quan sát

Một quan sát được thực thi khi nó được đăng ký. Người quan sát là một đối tượng có ba phương thức được thông báo,

next() - Phương thức này sẽ gửi các giá trị như một số, chuỗi, đối tượng, v.v.

complete() - Phương thức này sẽ không gửi bất kỳ giá trị nào và chỉ ra rằng có thể quan sát được là đã hoàn thành.

error() - Phương pháp này sẽ gửi lỗi nếu có.

Hãy để chúng tôi tạo thông báo có thể quan sát được với cả ba thông báo và thực thi giống nhau.

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"));

Trong đoạn mã trên, chúng tôi đã thêm, tiếp theo, hoàn thành và phương pháp lỗi.

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

Để thực hiện tiếp theo, hoàn thành và báo lỗi, chúng ta phải gọi phương thức đăng ký như hình dưới đây:

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

Phương thức lỗi sẽ chỉ được gọi nếu có lỗi.

Đây là đầu ra được thấy trong trình duyệt -