javascript - rxjs 中的可重用运算符

Question

基本上，我的这种逻辑在所有解析器中都是相同的。我在使其可重用于其他解析器时遇到问题。

这里是我的例子:

// fetch-abc.resolver.ts
@Injectable()
export class FetchAbcResolver implements Resolve<any> {

    constructor(private route: Router,
                private ngProgress: NgProgress,
                private abcService: AbcService) {
    }

    resolve = (activateRoute: ActivatedRouteSnapshot) => {

        this.ngProgress.start()

        const slug: string = activateRoute.paramMap.get('slug')

        return this.abcService.fetchAbc(slug)
                   .delay(1000)
                   .finally(() => this.ngProgress.done())
                   .catch(error => {
                       this.route.navigate([ '/404', {
                           err: 'Error',
                           msg: `Could not find ${slug}`, error
                       } ])

                       return Observable.empty()
                   })
    };
}

如何使 .delay、.finally 和 catch 可重用。

我目前正在进行的工作是这个

// rxjs.apply.ts
import { Observable } from 'rxjs/Observable'

function apply(functions: Array<Function>) {
    functions = [].concat(functions);

    return functions.reduce((observable, func) => func(observable));
}

Observable.prototype.apply = apply

declare module 'rxjs/Observable' {
    interface Observable<T> {
        apply: typeof apply;
    }
}

但我不知道如何组合运算符

Answer 1

如果您使用 RxJS 5.4 和 patch 风格的运算符，您可以使用 let 并制作一个函数，该函数采用您想要配置的参数并附加链你想要:

const myChain = (x, y) => 
  source => 
    source.delay(x)
      .finally(() => console.log(y))
      .catch(error => Observable.empty());

Observable.of(42)
  .let(myChain(1000, 'a'))
  .subscribe(console.log);

查看现场演示:https://stackblitz.com/edit/rxjs5-zytoqb?file=index.ts

其中 myChain 是一个返回附加运算符的函数的函数。当我在不使用箭头函数的情况下添加括号时，它可能更明显:

function myChain(x, y) {
  return function(source) {
    return source.delay(x)
      .finally(() => console.log(y))
      .catch(error => Observable.empty());
  };
};