Giới Thiệu

Trong lập trình ứng dụng hiện đại, việc thực hiện nhiều yêu cầu API đồng thời là điều phổ biến. Tuy nhiên, làm thế nào để quản lý dữ liệu phản hồi một cách hiệu quả mà không bị lún sâu vào callback hell hay các cấu trúc mã phức tạp?

Để giải quyết vấn đề này, RxJS cung cấp hai toán tử mạnh mẽ: forkJoin() và combineLatest(). Mặc dù cả hai đều cho phép kết hợp nhiều Input Observables thành một Observable duy nhất, nhưng chúng lại hoạt động theo cách khác nhau. Bài viết này sẽ giúp bạn hiểu rõ sự khác biệt giữa chúng và khi nào nên sử dụng từng toán tử một cách hợp lý.

Hiểu về combineLatest() - Cập nhật Liên Tục

combineLatest() là toán tử cho phép phát ra dữ liệu mới mỗi khi có bất kỳ một Input Observable nào phát giá trị.

Cách Hoạt Động:

• Yêu cầu tất cả Input Observable phải phát ít nhất một giá trị trước khi emit giá trị đầu tiên.
• Mỗi khi bất kỳ một Input Observable phát ra giá trị mới, combineLatest() sẽ kết hợp với giá trị mới nhất của các Input Observable khác.
• Không cần chờ đợi tất cả Input Observable hoàn thành trước khi phát ra kết quả.
• Nếu bất kỳ một Input Observable nào gặp lỗi, toàn bộ quá trình sẽ thất bại.

Ví Dụ Cụ Thể:

import { combineLatest, of, interval } from 'rxjs';
import { take } from 'rxjs/operators';

const obs1 = interval(1000).pipe(take(3)); // Phát 0, 1, 2
const obs2 = of('A', 'B', 'C');

combineLatest([obs1, obs2]).subscribe(
  result => console.log(result)
);
// Output: [0, 'A'], [1, 'A'], [1, 'B'], [2, 'B'], [2, 'C']

Khi Nào Nên Sử Dụng combineLatest()?

• Khi bạn cần lắng nghe và cập nhật mọi thay đổi từ tất cả Input Observables.
• Khi cần tính toán giá trị mới mỗi khi có sự thay đổi dữ liệu.

Khám Phá forkJoin() - Chờ Đợi Kết Quả Cuối Cùng

forkJoin() hoạt động theo cách chờ tất cả Input Observables hoàn thành trước khi phát ra dữ liệu cuối cùng từ mỗi observable.

Cách Hoạt Động:

• Chờ đợi cho đến khi tất cả các Input Observable hoàn thành.
• Phát ra giá trị cuối cùng của từng Input Observable.
• Nếu bất kỳ Input Observable nào gặp lỗi, toàn bộ quá trình sẽ thất bại.

Ví Dụ Cụ Thể:

import { forkJoin, of } from 'rxjs';
import { delay } from 'rxjs/operators';

const obs1 = of('A').pipe(delay(1000));
const obs2 = of('B').pipe(delay(2000));
const obs3 = of('C').pipe(delay(3000));

forkJoin([obs1, obs2, obs3]).subscribe(
  result => console.log(result) // Output: ['A', 'B', 'C'] sau 3 giây
);

Khi Nào Nên Sử Dụng forkJoin()?

• Khi bạn chỉ quan tâm đến kết quả cuối cùng từ mỗi Input Observable.
• Khi thực hiện các yêu cầu API song song và chỉ cần kết quả cuối cùng mà không cần cập nhật liên tục.

So Sánh Giữa combineLatest() và forkJoin()

Kết Luận

• Hãy sử dụng combineLatest() khi bạn mong muốn nhận cập nhật liên tục mỗi khi có dữ liệu mới.
• Nên sử dụng forkJoin() khi bạn chỉ cần dữ liệu cuối cùng từ tất cả Input Observables và muốn đơn giản hóa mã nguồn của mình.
• Nếu bạn gặp phải các Input Observable có khả năng phát lỗi, đừng quên sử dụng catchError() để xử lý lỗi một cách hiệu quả.

Hy vọng bài viết này đã giúp bạn làm rõ về sự khác biệt và cách sử dụng phù hợp giữa hai toán tử combineLatest() và forkJoin() trong RxJS!
source: viblo