RxJS – Toán tử kết hợp

Thứ Hai, 23/12/2019

Tram Ho

Combination Operators cho phép kết hợp thông tin từ nhiều Observable lại. Thứ tự, thời gian và cấu trúc của kết quả trả ra là điểm phân biệt chính giữa các operator này. Dưới đây là một số operator thường được sử dụng.

1. combineLatest

Operator này thường được sử dụng khi có nhiều Observable tồn tại trong thời gian dài, và kết quả của chúng cần dựa vào nhau để tính toán hoặc thực hiện hành động nào đó. combineLatest sẽ không trả ra giá trị cho đến khi từng Observable trả ít nhất một giá trị.

Output operator là một array, trong đó từng phần tử là kế quả của Observable được viết trong operator theo thứ tự đó.

<span class="token comment">// RxJS v6+</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> fromEvent<span class="token punctuation">,</span> combineLatest <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'rxjs'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> mapTo<span class="token punctuation">,</span> startWith<span class="token punctuation">,</span> scan<span class="token punctuation">,</span> tap<span class="token punctuation">,</span> map <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'rxjs/operators'</span><span class="token punctuation">;</span>

<span class="token comment">// elem refs</span>
<span class="token keyword">const</span> redTotal <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'red-total'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> blackTotal <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'black-total'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> total <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'total'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> <span class="token function-variable function">addOneClick$</span> <span class="token operator">=</span> id <span class="token operator">=&gt;</span>
  <span class="token function">fromEvent</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">'click'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span>
    <span class="token comment">// map every click to 1</span>
    <span class="token function">mapTo</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token comment">// keep a running total</span>
    <span class="token function">scan</span><span class="token punctuation">(</span><span class="token punctuation">(</span>acc<span class="token punctuation">,</span> curr<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> acc <span class="token operator">+</span> curr<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token function">startWith</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token function">combineLatest</span><span class="token punctuation">(</span><span class="token function">addOneClick$</span><span class="token punctuation">(</span><span class="token string">'red'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">addOneClick$</span><span class="token punctuation">(</span><span class="token string">'black'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span>
  <span class="token punctuation">(</span><span class="token punctuation">[</span>red<span class="token punctuation">,</span> black<span class="token punctuation">]</span><span class="token punctuation">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    redTotal<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> red<span class="token punctuation">;</span>
    blackTotal<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> black<span class="token punctuation">;</span>
    total<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> red <span class="token operator">+</span> black<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>

// RxJS v6+

import { fromEvent, combineLatest } from 'rxjs';

import { mapTo, startWith, scan, tap, map } from 'rxjs/operators';

// elem refs

const redTotal = document.getElementById('red-total');

const blackTotal = document.getElementById('black-total');

const total = document.getElementById('total');

const addOneClick$ = id =>

fromEvent(document.getElementById(id), 'click').pipe(

// map every click to 1

mapTo(1),

// keep a running total

scan((acc, curr) => acc + curr, 0),

startWith(0)

);

combineLatest(addOneClick$('red'), addOneClick$('black')).subscribe(

([red, black]: any) => {

redTotal.innerHTML = red;

blackTotal.innerHTML = black;

total.innerHTML = red + black;

}

);

2. forkJoin

Đồng thời gọi tất cả các Observable, khi tất cả kết thúc, trả ra dữ liệu cuối cùng của tất cả các Observable đó.

<span class="token comment">// RxJS v6.5+</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> ajax <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'rxjs/ajax'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> forkJoin <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'rxjs'</span><span class="token punctuation">;</span>

<span class="token comment">/*
  when all observables complete, provide the last
  emitted value from each as dictionary
*/</span>
<span class="token function">forkJoin</span><span class="token punctuation">(</span>
  <span class="token comment">// as of RxJS 6.5+ we can use a dictionary of sources</span>
  <span class="token punctuation">{</span>
    google<span class="token punctuation">:</span> ajax<span class="token punctuation">.</span><span class="token function">getJSON</span><span class="token punctuation">(</span><span class="token string">'https://api.github.com/users/google'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    microsoft<span class="token punctuation">:</span> ajax<span class="token punctuation">.</span><span class="token function">getJSON</span><span class="token punctuation">(</span><span class="token string">'https://api.github.com/users/microsoft'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    users<span class="token punctuation">:</span> ajax<span class="token punctuation">.</span><span class="token function">getJSON</span><span class="token punctuation">(</span><span class="token string">'https://api.github.com/users'</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">)</span>
  <span class="token comment">// { google: object, microsoft: object, users: array }</span>
  <span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token builtin">console</span><span class="token punctuation">.</span>log<span class="token punctuation">)</span><span class="token punctuation">;</span>

// RxJS v6.5+

import { ajax } from 'rxjs/ajax';

import { forkJoin } from 'rxjs';

/*

when all observables complete, provide the last

emitted value from each as dictionary

*/

forkJoin(

// as of RxJS 6.5+ we can use a dictionary of sources

{

google: ajax.getJSON('https://api.github.com/users/google'),

microsoft: ajax.getJSON('https://api.github.com/users/microsoft'),

users: ajax.getJSON('https://api.github.com/users')

}

)

// { google: object, microsoft: object, users: array }

.subscribe(console.log);

3. merge

Biến nhiều Observable thành một Observable chạy song song. Trả ra kết quả mỗi khi một Observable con trả ra kết quả.

<span class="token comment">// RxJS v6+</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> mapTo <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'rxjs/operators'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> interval<span class="token punctuation">,</span> merge <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'rxjs'</span><span class="token punctuation">;</span>

<span class="token comment">//emit every 2.5 seconds</span>
<span class="token keyword">const</span> first <span class="token operator">=</span> <span class="token function">interval</span><span class="token punctuation">(</span><span class="token number">2500</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//emit every 2 seconds</span>
<span class="token keyword">const</span> second <span class="token operator">=</span> <span class="token function">interval</span><span class="token punctuation">(</span><span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//emit every 1.5 seconds</span>
<span class="token keyword">const</span> third <span class="token operator">=</span> <span class="token function">interval</span><span class="token punctuation">(</span><span class="token number">1500</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//emit every 1 second</span>
<span class="token keyword">const</span> fourth <span class="token operator">=</span> <span class="token function">interval</span><span class="token punctuation">(</span><span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">//emit outputs from one observable</span>
<span class="token keyword">const</span> example <span class="token operator">=</span> <span class="token function">merge</span><span class="token punctuation">(</span>
  first<span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">mapTo</span><span class="token punctuation">(</span><span class="token string">'FIRST!'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  second<span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">mapTo</span><span class="token punctuation">(</span><span class="token string">'SECOND!'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  third<span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">mapTo</span><span class="token punctuation">(</span><span class="token string">'THIRD'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  fourth<span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">mapTo</span><span class="token punctuation">(</span><span class="token string">'FOURTH'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//output: "FOURTH", "THIRD", "SECOND!", "FOURTH", "FIRST!", "THIRD", "FOURTH"</span>
<span class="token keyword">const</span> subscribe <span class="token operator">=</span> example<span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span>val <span class="token operator">=&gt;</span> <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

// RxJS v6+

import { mapTo } from 'rxjs/operators';

import { interval, merge } from 'rxjs';

//emit every 2.5 seconds

const first = interval(2500);

//emit every 2 seconds

const second = interval(2000);

//emit every 1.5 seconds

const third = interval(1500);

//emit every 1 second

const fourth = interval(1000);

//emit outputs from one observable

const example = merge(

first.pipe(mapTo('FIRST!')),

second.pipe(mapTo('SECOND!')),

third.pipe(mapTo('THIRD')),

fourth.pipe(mapTo('FOURTH'))

);

//output: "FOURTH", "THIRD", "SECOND!", "FOURTH", "FIRST!", "THIRD", "FOURTH"

const subscribe = example.subscribe(val => console.log(val));

Trên đây là một số Combine Operator. Nguồn tham khảo:
https://www.learnrxjs.io/operators/combination/

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

RxJS – Toán tử kết hợp

1. combineLatest

2. forkJoin

3. merge

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript