RxJS 6 进阶指南：探索过滤操作符的神奇力量

2023-11-24 11:12:44

RxJS 过滤操作符：精细控制异步数据流

简介

RxJS 是 Angular 中处理异步数据流的强大工具，其过滤操作符是 RxJS 的核心，允许我们对数据流进行精细的控制，提取所需的特定数据。本文将深入探讨 RxJS 6 中常用的过滤操作符，从基本到高级，辅以代码示例，助你轻松掌握这些操作符的实际应用。

1. debounce：防止过度输出，扼杀冗余

debounce 操作符如同一道稳健的闸门，可防止过量的输出值涌入。它通过过滤掉在指定时间间隔内连续发出的值来实现。举个例子，当我们在搜索栏中输入时，频繁的 HTTP 请求会给服务器带来负担。使用 debounce 操作符，我们可以抑制在指定时间间隔（例如 300 毫秒）内的连续请求，只发出最后一次请求。

import { debounce } from 'rxjs/operators';

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

source$.pipe(
  debounce(() => interval(300))
).subscribe(value => console.log(value));

2. debounceTime：指定抑制时长，控制输出频率

debounceTime 操作符与 debounce 类似，但它采用更直接的方式：它简单地抑制在指定时间间隔内发出的所有值。与 debounce 相比，debounceTime 不管值的发出频率如何，都会在指定的时长内抑制所有值。

import { debounceTime } from 'rxjs/operators';

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

source$.pipe(
  debounceTime(300)
).subscribe(value => console.log(value));

3. distinct：去重，剔除重复项

distinct 操作符是一个数据清洁工，它可以从数据流中剔除重复项，只留下独一无二的值。在处理来自多个来源的数据时，这非常有用，可以防止重复数据污染我们的应用程序。

import { distinct } from 'rxjs/operators';

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

source$.pipe(
  distinct()
).subscribe(value => console.log(value));

4. takeUntil：数据阀门，按需关闭

takeUntil 操作符是一个数据阀门，它可以根据指定的另一条数据流来控制目标数据流的输出。当另一条数据流发出值时，takeUntil 操作符将停止目标数据流的发射。这在需要根据特定条件停止数据流时非常有用。

import { takeUntil } from 'rxjs/operators';

const source$ = interval(1000);

const unsubscribe$ = new Subject();

source$.pipe(
  takeUntil(unsubscribe$)
).subscribe(value => console.log(value));

// 延迟 5 秒后关闭数据流
setTimeout(() => unsubscribe$.next(), 5000);

5. throttle：节流，控制输出频率

throttle 操作符与 debounce 类似，但它采取了一种不同的节流方式：它只允许在指定的时间间隔内发出第一个值，抑制所有后续值。这对于防止频繁的事件触发不必要的操作非常有用。

import { throttle } from 'rxjs/operators';

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

source$.pipe(
  throttle(() => interval(300))
).subscribe(value => console.log(value));

6. throttleTime：指定输出间隔，控制节流频率

throttleTime 操作符与 throttle 类似，但它采用更直接的方式：它只允许在指定的时间间隔内发出第一个值，而不管在这个时间间隔内发出了多少值。与 throttle 操作符不同，throttleTime 操作符不会抑制在指定时间间隔内发出的后续值，而是直接丢弃它们。

import { throttleTime } from 'rxjs/operators';

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

source$.pipe(
  throttleTime(300)
).subscribe(value => console.log(value));