将rxjs管道封装成函数

Question

我一直在搜索，但找不到答案。

有没有办法把rxjs的管道方法封装成自定义方法？

<observable>.pipe(
filter((num: number) => num % 2 === 0),
take(10)
map((num: number) => num * 10),).subscribe(...);

我想减少到

<observable>.doSomeThingsThatArePiped().subscribe(...);

我知道自定义管道运算符可以简化管道中的内容，但在我的代码中，我有一组多次使用的运算符，我想尽可能地减少它——包括管道。

Answer 1

function yourOperator(source: Observable<T>) {
    return source.pipe(
        filter((num: number) => num % 2 === 0),
        take(10),
        map((num: number) => num * 10)
    );
}

并像这样使用它：

observable.pipe(
  yourOperator
).subscribe(value => console.log(value));

Answer 2

你可以像这样在 pipe 中封装公共链：

function myCustomOperator() { // whatever parameters you need, if any
  return pipe(
    filter((num: number) => num % 2 === 0),
    take(10),
    map((num: number) => num * 10)
  )
}

那么用法就简单了：

<observable>.pipe(myCustomOperator()).subscribe(...);

Answer 3

我的原始代码是通用的，但这是我为扩展 Observable 原型的真实项目想出的代码。

import { Observable } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

declare module 'rxjs' {
  interface Observable<T> {
      subscribeUntilDestroyed: (component: any) => Observable<T>;
  }
}

interface IDestroyNotifier {
  readonly destroyed$: Observable<boolean>;
}

function untilDestroyed(notifier: IDestroyNotifier) {
  return <T>(source: Observable<T>) => source.pipe(takeUntil(notifier.destroyed$));
}

Observable.prototype.subscribeUntilDestroyed = function (component) {
  return this.pipe(untilDestroyed(component));
};

将rxjs管道封装成函数

Encapsulate rxjs pipe into function

rxjs

rxjs-pipeable-operators