Rxjs Operators: combineLatest và forkJoin

Bạn có đang hiểu rõ combineLatest vs forkJoin

Cả combineLatest và forkJoin thường được developer sử dụng khi chúng ta xử lý multi request đồng thời.

Bạn đã thực sự hiểu và phân biệt được nhiệm vụ của 2 operators này hay chưa?

combineLatest: bắt đầu trigger khi tất cả các observables có giá trị trả về. Nghĩa là observables có nhiều giá trị trả về thì nó sẽ tiếp tục trigger và trả ra giá trị gần nhất của các observables
forkJoin: trigger khi tất cả observables đã completed.

Nhìn vào hình ảnh mình hoạ quá trình trigger của combineLatest và forkJoin các bạn chắc cũng hình dung ra nó hoạt động như thế nào rồi đúng không?

Nhưng thực tế thì chúng được dùng trong trường hợp nào?

  • Nếu bạn có nhiều observables và các observables mang nhiều giá trị(next) và emit nhiều giá trị thì combineLatest là sự lựa chọn tốt với bạn.
  • Còn trường hợp bạn làm việc với các observables mà nó chỉ emit 1 giá trị và bạn chỉ quan tâm đến giá trị cuối của mỗi observable đó trước khi completed thì forkJoin là câu trả lời cho câu hỏi này. 😃

Code dưới đây sẽ giúp bạn hiểu combineLatest nên được dùng trong trường hợp như nào!

import { combineLatest, Subject } from 'rxjs';

const weight = new Subject<number>();
const height = new Subject<number>();
combineLatest(weight, height).subscribe(([w, h]) => { 
  console.log('weight ' + w);
  console.log('height ' + h);
  console.log('BMI ' + w / (h*h))
  console.log('')
});
weight.next(70);
height.next(1.70);

weight.next(75);
height.next(1.72);

weight.next(60);
height.next(1.78);

// With output to console:
// weight 70
// height 1.7
// BMI 24.221453287197235
// weight 75
// height 1.7
// BMI 25.95155709342561
// weight 75
// height 1.72
// BMI 25.351541373715524
// weight 60
// height 1.72
// BMI 20.281233098972418
// weight 60
// height 1.78
// BMI 18.93700290367378

Kết luận

2 operators này là khá tương tự nhau nên rất dễ gây nhầm lẫn trong quá trình sử dụng. Vì vậy hãy đọc kĩ hướng dẫn sử dụng trước khi dùng nhé anh em 😛
Thân ái và quyết thắng 😃

Tham khảo

learning-rxjs-combineLatest
RxJS Operators for Dummies


All Rights Reserved