Question

我在Angular 6上开发了一个应用程序，我试图学习如何使用rxjs。

今天我遇到了一个需要解决的特殊问题：Handling workflow with Rxjs。

我在StackBlitz中创建了一个示例：https://stackblitz.com/edit/angular-zbstnw?file=src%2Fapp%2Fapp.component.ts

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
    }
}

html

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

所以这个例子有效，但看起来不对。

简而言之，我使用concat按顺序运行Observables，并使用单个键将其包装在一个对象中（用作令牌）。

然后当我想订阅时，我使用此令牌来过滤我的序列。

这看起来不错吗？还有另一种方式吗？

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

RxJs，如何处理工作流程？

0 个答案: