RxJS : of, tap, map, và filter

Trong bài viết này, mình cố gắng tổng hợp và đưa ra các ví dụ đơn giản về các hàm of(), tap(), map(), và filter().

of()

of(...items)—Returns an Observable instance that synchronously delivers the values provided as arguments.

 Trả về 1 biến observable

// Create simple observable that emits three values
const myObservable = of(1, 2, 3);

// Create observer object
const myObserver = {
  next: (x: number) => console.log('Observer got a next value: ' + x),
  error: (err: Error) => console.error('Observer got an error: ' + err),
  complete: () => console.log('Observer got a complete notification'),
};

// Execute with the observer object
myObservable.subscribe(myObserver);

// Logs:
// Observer got a next value: 1
// Observer got a next value: 2
// Observer got a next value: 3
// Observer got a complete notification

tap()

RxJS tap performs side effects for every value emitted by source Observable and returns an Observable identical to the source Observable until there is no error.

Tạm hiểu là làm gì đó khi stream có data được đẩy vào.

import { of, tap } from 'rxjs';
const source = of(1, 2, 3, 4, 5);
// Log each value with tap
const example = source.pipe(tap((val) => console.log(`Tap: ${val}`)));

//'tap' does not transform values
//output: Tap: 1
//1
//Tap: 2
//2
//output: Tap: 3
//3
//Tap: 4
//4
//output: Tap: 5
//5
const subscribe = example.subscribe((val) => console.log(val));

Giải thích: 

Các giá trị lần lượt được đưa hàm tap() sau đó được đưa vào hàm subscribe()
Bạn có thể hiểu việc thực thi như đoạn code sau:

var list = new List<int> {1, 2, 3, 4, 5}
foreach(var item in list)
{
	tap(item);
	subscribe(item);
}

map()

map is a RxJS pipeable operator. map applies a given function to each element emitted by the source Observable and emits the resulting values as an Observable

Tạm hiểu là dữ liệu nào chạy qua đây sẽ bị điều chỉnh sau đó trả lại cho operators liền sau Cú pháp:

map(project: function(value: T, index: number): R, thisArg: any): Observable<R>

Ví dụ:

import { of, map } from 'rxjs';
const source = of(0, 1, 2, 3, 4);
// Log each value with tap
const example = source.pipe(      
  map((val) => val + 10),     
);

//'tap' does not transform values
//output: 10..11...12...13...14
const subscribe = example.subscribe((val) => console.log(val));

filter()

Like Array.prototype.filter(), it only emits a value from the source if it passes a criterion function.

Tạm hiểu là thoả mãn điều kiện thì mới làm, không thì thôi. Bạn có thể tạm hiểu hàm này sẽ giống như hàm Where trong LinQ

public filter(predicate: function(value: T, index: number): boolean, thisArg: any): Observable

Ví dụ:

const source = of(0, 1, 2, 3, 4);
// Log each value with tap
const example = source.pipe(
  filter((num) => num % 2 === 1),
);

 Source code: https://stackblitz.com/edit/angular-ivy-3rmxxt?devtoolsheight=33&file=src/app/app.component.ts

Tham khảo

https://viblo.asia/p/rxjs-basic-operators-924lJpxWKPM 

http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-filter