Một số Operation phổ biến trong (Phần 1)
Khi làm việc với các framework của JavaScript, chắc chắn bạn sẽ cần phải làm việc với RxJS. RxJS là điều kiện tối thiểu để bạn có thể ứng tuyển vị trí Frontend Developer.
RxJS có rất nhiều hàm, mỗi hàm có một nhiệm vụ khác nhau. Tuy nhiên sẽ có những hàm bạn sẽ phải làm việc với nó liên tục và rất nhiều lần. Trong bài viết ngày mình sẽ giới thiệu đến mọi người các hàm được sử dụng nhiều nhất.
Lưu ý: Các data đưa vào xử lý tại các hàm này đều phải là một Observable.
pipe() và subscribe()
Với 2 hàm này, ta có thể coi nó là cấu trúc để sử dụng các hàm khác, ko cần import để sử dụng
Cấu trúc phổ biến và nên sử dụng như sau:
this.apiService.get()
.pipe(
tap(response => {
// do something here;
}),
// Một số operations khác viết tiếp ở đây;
)
.subscribe();
of()
Tác dụng: Khi một dữ liệu được đi qua hàm of() thì nó sẽ trả về một dữ liệu có kiểu Observable. Chỉ có kiểu Observable mới có thể .subscribe() hay dùng các hàm khác của RxJS
Ví dụ:
import { of } from 'rxjs';
const source = of(1, 2, 3);
const subscribe = source.subscribe(val => console.log(val));
// logs 1, 2, 3
map()
Tác dụng: là một operator của RxJS cho phép bạn biến đổi các giá trị trong một Observable.
import { of } from 'rxjs';
import { map } from 'rxjs/operators';
of(1, 2, 3)
.pipe(
map(x => x + x)
)
.subscribe(console.log); // logs 2, 4, 6
take()
Ở đây mình dùng hàm interval(1000) để cứ mỗi 1 giây (1000 mili giây) thì sẽ log một lần. Cứ như vậy thì giá trị được log ra sẽ liên tục không ngừng. Tuy nhiên đoạn code sau chỉ log ra 5 lần. Đó là tác dụng của hàm take(5)
Tác dụng: Lấy ra số giá trị đầu tiên của Observable trả về
import { interval } from 'rxjs';
import { take } from 'rxjs/operators';
// Ví dụ 1
const source = interval(1000);
const example = source
.pipe(
take(5)
)
.subscribe(val => console.log(val)); // logs 0, 1, 2, 3, 4
// Ví dụ 2
of(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)
.pipe(
take(5)
)
.subscribe(val => console.log(val)); // logs 1, 2, 3, 4, 5
tap()
Tác dụng: Các đoạn code thực hiện ở đây sẽ không làm ảnh hưởng đến luồng dữ liệu đang xử lý ở các operation khác
Đoạn code sau cho chúng ta thấy rằng dù đã được * 2 giá trị nhưng kết quả log ra vẫn chỉ là 1, 2, 3 thay vì 1, 4, 6 bởi vì ta đã viết nó trong hàm tap()
import { of } from 'rxjs';
import { tap } from 'rxjs/operators';
const source = of(1, 2, 3);
const example = source
.pipe(
tap(val => console.log(`Before: ${val}`)),
tap(val => val * 2),
tap(val => console.log(`After: ${val}`))
)
.subscribe();
// logs 'Before: 1', 'After: 1', 'Before: 2', 'After: 2', 'Before: 3', 'After: 3'
merge()
Tác dụng: Gộp nhiều Observable thành một Observable theo thứ tự xuất hiện
Ở ví dụ dưới ta thấy thay vì tạo ra [1, 1, 1, 2, 2, 2] thì lại có kết quả là [1, 1, 2, 1, 1, 2] bởi vì cứ một giây thì số 1 mới xuất hiện một lần, còn cứ 2 giây thì số 2 xuất hiện một lần.
import { interval, of, merge, take, mapTo } from 'rxjs';
const list1 = interval(1000);
const list2 = interval(2000);
const finalVal = merge(
list1.pipe(mapTo('1')),
list2.pipe(mapTo('2'))
)
finalVal
.pipe(
take(6)
)
.subscribe(x => console.log(x)); // logs 1, 1, 2, 1, 1, 2
concat()
Tác dụng: Cũng dùng để nối hai Observable lại thành một observable nhưng sẽ nối lần lượt, hết Observable này rồi mới tới Obsevable khác
Cùng với ví dụ trên nếu ta thay merge() thành concat() thì log ra kết quả là 1,1,1,1,1,1 do nó sẽ chạy hết list1 trước nhưng list một thì nó chạy liên tục không ngừng.
import { interval, of, merge, concat, take, mapTo } from 'rxjs';
const list1 = interval(1000);
const list2 = interval(2000);
const finalVal = concat(
list1.pipe(mapTo('1')),
list2.pipe(mapTo('2'))
)
finalVal
.pipe(
take(6)
)
.subscribe(x => console.log(x)); // logs 1, 1, 1, 1, 1, 1
Ví dụ khác cho concat()
Nhìn vào log thì ta đã hiểu cách chạy của nó rồi nhỉ?
import { of } from 'rxjs';
import { concat } from 'rxjs/operators';
const sourceOne = of(1, 2, 3);
const sourceTwo = of(4, 5, 6);
sourceOne
.pipe(concat(sourceTwo))
.subscribe(val => console.log(val)); // logs 1, 2, 3, 4, 5, 6
Còn tiếp phần 2……
Nhận xét
Đăng nhận xét