复习一下RxJs的基本概念

基础概念

• Observable（可观察对象）: RxJS的核心部分，代表一个可以被观察的数据流。
• Observer（观察者）: 观察可观察对象的对象，通常是一个回调函数。
• Subscription（订阅）: 连接观察者和可观察对象的过程。
• Operators（操作符）: 用于处理和转换数据流的函数，比如映射、过滤等。
• Subject（主题）: 一种特殊类型的可观察对象，允许多播（多个观察者可以同时观察）。

举栗子

创建 Observable

import { Observable } from 'rxjs';

// 创建一个简单的 Observable
const observable = new Observable(subscriber => {
  subscriber.next('Hello');
  subscriber.next('World');
  subscriber.complete();
});

// 订阅 Observable
observable.subscribe({
  next(value) { console.log(value); },
  complete() { console.log('Done'); }
});

RxJS 提供了许多操作符，用于处理 Observable 流。常用的操作符包括：

• map: 转换数据
• filter: 过滤数据
• mergeMap: 扁平化嵌套 Observable
• catchError: 处理错误

import { of } from 'rxjs';
import { map, filter } from 'rxjs/operators';

const numbers = of(1, 2, 3, 4, 5);

numbers.pipe(
  filter(n => n % 2 === 1), // 只保留奇数
  map(n => n * n) // 平方
).subscribe(console.log);

Subject 可以被看作是一个可观察对象，也可以作为观察者使用：

import { Subject } from 'rxjs';

const subject = new Subject();

subject.subscribe({
  next: (v) => console.log(`Observer A: ${v}`)
});

subject.subscribe({
  next: (v) => console.log(`Observer B: ${v}`)
});

subject.next(1); // 观察者 A 和 B 都会接收到这个值

使用 catchError 操作符来捕获并处理错误：

import { of } from 'rxjs';
import { catchError } from 'rxjs/operators';

const observableWithError = new Observable(subscriber => {
  subscriber.next('Hello');
  throw new Error('Oops!');
  subscriber.complete();
});

observableWithError.pipe(
  catchError(err => {
    console.error('Caught error:', err);
    return of('Fallback value'); // 返回一个新的可观察对象
  })
).subscribe(console.log);

获取鼠标当前点坐标

import { fromEvent } from 'rxjs';
import { map } from 'rxjs/operators';

// 监听按钮点击事件
const button = document.getElementById('myButton');
const clicks = fromEvent(button, 'click');

clicks.pipe(
  map(event => event.clientX) // 获取点击位置的 X 坐标
).subscribe(x => console.log(`Clicked at: ${x}`));

俺觉得Redux，Vuex这种可能更适合于数据流管理，但RxJs更适合响应式编程，尤其是在需要消息中心，很多订阅发布的那种业务中。

反正用过的都说好。