Subject , BehaviorSubject , ReplaySubject , AsyncSubject - quan1997ap/angular-app-note GitHub Wiki

https://dammecode.wordpress.com/2020/06/24/behaviorsubject-replaysubject-va-asyncsubject-khac-nhau-the-na/#:~:text=Subject%3A%20ch%E1%BB%89%20nh%E1%BA%ADn%20data%20sau%20khi%20%C4%91%C3%A3%20subscribe.&text=BehavorSubject%3A%20Subscriber%20ch%E1%BB%89%20l%E1%BA%A5y%20%C4%91%C6%B0%E1%BB%A3c,l%E1%BA%A1i%20v%C3%A0%20emit%20cho%20subscriber.

1. Subject: Chỉ nhận data sau khi đã subscribe.

    import * as Rx from "rxjs";

    const subject = new Rx.Subject();

    subject.next(1);
    subject.next(2);

    subject.subscribe((data) => {
        console.log('Subscriber data:', data);
    });

    subject.next(3);

    // output
    // Subscriber data: 3

2. BehaviorSubject: subscriber sẽ nhận được giá trị cuối cùng mà Subject emit khi nó bắt đầu subscribe. ( hay dùng BehaviorSubject để chia sẻ thông tin user hiện tại đang đăng nhập hệ thống cho các component khác nhau trong Angular chẳng hạn. )

VD: Subscriber chỉ lấy được 2 giá trị trong khi Subject emit tới 3 giá trị, tức là chỉ giá trị cuối trước khi subscribe được lưu lại và emit cho subscriber.

    import * as Rx from "rxjs";

    const subject = new Rx.BehaviorSubject(0);

    subject.next(1);
    subject.next(2);

    subject.subscribe((data) => {
        console.log('Subscriber data:', data);
    });

    subject.next(3);

    // output
    // Subscriber data: 2
    // Subscriber data: 3

3. ReplaySubject: Cũng tương tự BehaviorSubject, tuy nhiên dữ liệu đã emit được lưu lại với số lượng tùy ý (được cấu hình lúc khai báo). Khi subscriber bắt đầu subscribe thì nó sẽ nhận được số lượng giá trị đã emit trước đó tương ứng.

Tham số đầu vào của ReplaySubject có thể là:

• buffer: là số lượng phần tử tối đa có thể lưu trữ.
• windowTime: (ms) thời gian tối đa tính đến thời điểm gần nhất emit value.

VD: Tuy subscriber subscribe sau khi Subject đã emit 3 giá trị, tuy nhiên nó vẫn nhận được 3 giá trị, gồm 1 giá trị emit sau khi subscribe. Đó là bởi vì chúng ta đã cấu hình ReplaySubject lưu 2 giá trị trước để emit cho subscriber lúc bắt đầu đăng ký nhận dữ liệu.

    import * as Rx from "rxjs";

    const subject = new Rx.ReplaySubject(2);

    subject.next(1)
    subject.next(2)
    subject.next(3)

    // subscriber
    subject.subscribe((data) => {
        console.log('Subscriber data:', data);
    });

    subject.next(4);

    // Subscriber data: 2
    // Subscriber data: 3
    // Subscriber data: 4

4. AsyncSubject: Chỉ emit giá trị cuối cùng trước lúc gọi hàm complete();

VD: Chỉ có duy nhất 1 giá trị cuối cùng trước lúc gọi hàm complete() được nhận bởi Subscriber, dù cho Subject đã emit tới 4 lần.

    import * as Rx from "rxjs";

    const subject = new Rx.AsyncSubject();


    subject.next(1)
    subject.next(2)


    subject.subscribe((data) => {
        console.log('Subscriber data:', data);
    });

    subject.next(3);
    subject.complete();
    subject.next(4))
    // Subscriber data: 3