Javascript RxJs，如何处理工作流？

我在Angular 6上开发了一个应用程序，我正在努力学习如何使用rxjs

今天，我遇到了一个需要解决的特殊问题：

使用Rxjs处理工作流

我在StackBlitz中创建了一个示例：

ts

//app.component.ts
import { Component } from '@angular/core';
import { concat, interval, pipe, of } from 'rxjs';
import { takeWhile, map, share, filter } from 'rxjs/operators';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  workflow$;
  documents$;
  images$;
  done$;

  constructor(){

    // We start with the workflow as a Base, then we use concat to run Observable in sequences
    this.workflow$ = concat(simulateMultipleReq(10, 'doc'), simulateMultipleReq(5, 'img'), of({done: 0}))
      .pipe(share());

    // 
    this.documents$ = this.workflow$.pipe(tokenFilter('doc'));
    this.images$ = this.workflow$.pipe(tokenFilter('img'))
    this.done$ = this.workflow$.pipe(tokenFilter('done'))
  }


}


function simulateMultipleReq(number, token){
  return interval(500)
    .pipe(takeWhile((x) => x < number), map((x) => {
      return {[token]: x}
    }))
}

function tokenFilter(token){
  return pipe(
    filter(getTokenValue(token)),
    map(getTokenValue(token)),
  )
}

function getTokenValue(token){
  return (x) => {
      return x[token] + 1
    }
}

//app.component.ts
从'@angular/core'导入{Component}；
从'rxjs'导入{concat，interval，pipe，of}；
从'rxjs/operators'导入{takeWhile，map，share，filter}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
工作流$；
文件(元);；
图像$；
完成$；
构造函数（）{
//我们首先以工作流为基础，然后使用concat按顺序运行Observable
this.workflow$=concat（simulateMultipleReq（10，'doc'）、simulateMultipleReq（5，'img'），of（{done:0}））
.pipe（share（））；
// 
this.documents$=this.workflow$.pipe（tokenFilter（'doc'）；
this.images$=this.workflow$.pipe（令牌过滤器（'img'））
this.done$=this.workflow$.pipe（tokenFilter（'done'））
}
}
函数simulateMultipleReq（数字、令牌）{
返回间隔（500）
.pipe（takeWhile（（x）=>x{
返回{[token]：x}
}))
}
函数令牌过滤器（令牌）{
回流管(
过滤器（getTokenValue（令牌）），
映射（getTokenValue（令牌）），
)
}
函数getTokenValue（令牌）{
返回（x）=>{
返回x[令牌]+1
}
}

html

<!-- app.component.html -->
<div>{{documents$ | async}} / 10</div>
<div>{{images$ | async}} / 5</div>
<div *ngIf="done$ | async">
  Done sending data
</div>

{{documents$| async}}/10
{{images$| async}}/5
发送数据完毕

因此，这个例子是可行的，但它似乎并不正确

简而言之，我使用concat按顺序运行可观察对象，对于每个可观察对象，我用一个键（用作标记）将其包装在一个对象中

然后，当我想要订阅时，我使用这个令牌来过滤我的序列

这个好看吗？还有别的办法吗

---

谢谢，如果您有任何问题，我很乐意回答。

请在此处发布相关代码，不要在场外发布。@zero298我用问题中的代码更新了它