RxJS - Multicasting

Bài đăng này đã không được cập nhật trong 4 năm

Trước khi bắt đầu hãy tham khảo ví dụ về một trường hợp thường có thể xảy ra khi handle API trong Angular:

ngOnInit() {
   this.user$ = this.http.get(`api/user/1`)
   this.name$ = this.user$.pipe(
      map(user => user.name)
   );
   this.age$ = this.user$.pipe(
      map(user => user.age)
   );
}

<div>{{name$ | async}}</div>
<div>{{age$ | async}}</div>

Với cách sử dụng như trên, trong tab Network của trình duyệt sẽ xuất hiện 2 request lên server. Nguyên nhân ở đây là với cách viết name$, age$ như trên thì Angular sẽ tạo "Cold" observable (Tham khảo về Hot và Cold Observable). Rõ ràng là nên tránh gọi API tới 2 lần để lấy một kết quả như vậy.

Vấn đề có thể được giải quyết như sau:

this.user$ = this.http.get(`api/user/1`).pipe(
  share()
);

//or 

this.user$ = this.http.get(`api/user/1`).pipe(
 publish(),
 refCount()
);

Thêm operator share() hoặc publish(), refCount() như trên cho phép chia sẻ dữ liệu giữa các subscriber. Bằng cách trên, Cold Observable ban đầu đã được biến thành Hot Observable. Một API trả cùng kết quả sẽ không bị gọi lại nhiều lần mà sẽ trả một kết quả duy nhất, được chia sẻ giữa các subscribers

Nguồn tham khảo:

Angular 2 Rxjs

Mục lục