上手 RxJS：掌握異步編程的秘密武器！
作者：萌萌噠草頭將軍
Effect-ts? 的設計理念是基于副作用思想的開發(fā)范式，而 Rx.js 脫胎于響應式編程思路的開發(fā)范式，另外 Rx.js? 主打的是處理異步事件流，而 Effect-ts? 主打的是比 TypeScript 更安全的類型推理！
前言
昨天介紹 Effect-TS 時，有小伙伴問我：和 RxJS 的語法很像，他們有什么區(qū)別？
1. 核心概念
RxJS 是一個基于 Observables 的庫，用于處理異步和基于事件的編程。它通過響應式編程范式，讓開發(fā)者能夠以聲明式的方式管理復雜的數(shù)據(jù)流和事件，下面是幾個核心概念
- Observable：Observable 是 RxJS 的核心，表示一個可以隨時間發(fā)出多個值的數(shù)據(jù)流。你可以將其想象成一個“可訂閱的管道”，通過它可以接收數(shù)據(jù)。
import { Observable } from 'rxjs';
const observable = new Observable(subscriber => {
subscriber.next(1);
subscriber.next(2);
setTimeout(() => {
subscriber.next(3);
subscriber.complete();
}, 1000);
});- Observer：Observer 是訂閱 Observable 的對象，包含 next、error 和 complete 方法，用于處理 Observable 發(fā)出的值、錯誤和完成狀態(tài)。
- Subscription：Subscription 是訂閱 Observable 后返回的對象，用于管理訂閱狀態(tài)，比如取消訂閱
const subscription = observable.subscribe({
next: value => console.log(value),
error: err => console.error(err),
complete: () => console.log('Completed')
});
// 取消訂閱
subscription.unsubscribe();- Operators：RxJS 提供了豐富的操作符（如 map、filter、mergeMap 等），用于轉(zhuǎn)換和操作數(shù)據(jù)流
import { of } from 'rxjs';
import { map, filter } from 'rxjs/operators';
of(1, 2, 3, 4)
.pipe(
filter(x => x % 2 === 0),
map(x => x * 2)
)
.subscribe(x => console.log(x)); // 輸出 4, 82. 常用操作符
RxJS 的操作符是其強大功能的核心，以下是幾個常用的操作符：
- map：對數(shù)據(jù)流中的每個值進行轉(zhuǎn)換。
- filter：過濾符合條件的值!
- mergeMap：將一個 Observable 映射為另一個 Observable，并將結果展平。
- debounceTime：延遲發(fā)出值，常用于處理用戶輸入防抖!
import { fromEvent } from 'rxjs';
import { debounceTime, map } from 'rxjs/operators';
const input = document.querySelector('input');
fromEvent(input, 'input')
.pipe(
debounceTime(300),
map(event => event.target.value)
)
.subscribe(value => console.log(value));3. 實際應用場景
- 表單輸入防抖：通過 debounceTime 減少不必要的 API 請求。
- 實時數(shù)據(jù)處理：如 WebSocket 數(shù)據(jù)流，通過 mergeMap 和 filter 處理復雜邏輯。
- 異步任務協(xié)調(diào)：使用 forkJoin 或 combineLatest 組合多個異步請求!
import { forkJoin, of } from 'rxjs';
import { delay } from 'rxjs/operators';
const source1 = of('Hello').pipe(delay(1000));
const source2 = of('World').pipe(delay(2000));
forkJoin([source1, source2]).subscribe(([res1, res2]) => {
console.log(`${res1} ${res2}`); // 輸出 "Hello World"
});最后
學習完之后，雖然在語法上頗有相似之處，但是給我的第一感覺：Effect-ts 的設計理念是基于副作用思想的開發(fā)范式，而 Rx.js 脫胎于響應式編程思路的開發(fā)范式，另外 Rx.js 主打的是處理異步事件流，而 Effect-ts 主打的是比 TypeScript 更安全的類型推理！
官網(wǎng)：https://rxjs.dev/
責任編輯：武曉燕
來源：
萌萌噠草頭將軍
