🚀🚀上手 RxJS：掌握异步编程的秘密武器！

萌萌哒草头将军
947 阅读2分钟

前言

昨天介绍 Effect-TS 时，有小伙伴问我：和 RxJS 的语法很像，他们有什么区别？

出于我好奇我摸鱼的时候学习了下，今天分享给大家！

正文

1. 核心概念

RxJS 是一个基于 Observables 的库，用于处理异步和基于事件的编程。它通过响应式编程范式，让开发者能够以声明式的方式管理复杂的数据流和事件，下面是几个核心概念

  • Observable：Observable 是 RxJS 的核心，表示一个可以随时间发出多个值的数据流。你可以将其想象成一个“可订阅的管道”，通过它可以接收数据。
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 发出的值、错误和完成状态。
  • Subscription：Subscription 是订阅 Observable 后返回的对象，用于管理订阅状态，比如取消订阅
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 等），用于转换和操作数据流
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, 8

2. 常用操作符

RxJS 的操作符是其强大功能的核心，以下是几个常用的操作符：

  • map：对数据流中的每个值进行转换。
  • filter：过滤符合条件的值!
  • mergeMap：将一个 Observable 映射为另一个 Observable，并将结果展平。
  • debounceTime：延迟发出值，常用于处理用户输入防抖!
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 请求。
  • 实时数据处理：如 WebSocket 数据流，通过 mergeMap 和 filter 处理复杂逻辑。
  • 异步任务协调：使用 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 的设计理念是基于副作用思想的开发范式，而 Rx.js 脱胎于响应式编程思路的开发范式，另外 Rx.js 主打的是处理异步事件流，而 Effect-ts 主打的是比 TypeScript 更安全的类型推理！

今天的分享就这些了，感谢大家的阅读，如果文章中存在错误的地方欢迎指正！

avatar
文章
阅读
粉丝