Question

我想使用RxJs中的switchMap（...）顺序执行休息请求。

对象：

export class Transaction {
  constructor(
    public id: string,
    public unique_id: string,
    public name: string,
    public status: string,
    public type: string,
    public created_at: Date
  ) {}
}

组件：

@Component({
  selector: 'app-transaction-details',
  templateUrl: './transaction-details.component.html',
  styleUrls: ['./transaction-details.component.scss']
})
export class TransactionDetailsComponent implements OnInit {

  processingLogs: ProcessingLogs = new ProcessingLogs(null, null, null, null, null);
  transaction: Transaction;

  constructor(private transactionService: TransactionService,
              private processingLogsService: ProcessingLogsService,
              private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.params.pipe(
      flatMap(params => {
        if(params['id']) {
          return this.transactionService.get(params['id']);
        } else {
          return of(null);
        }
      })
    ).subscribe(value => {
      if(value != null) {
        this.transaction = value;
      }
    });

    this.route.params.pipe(
      flatMap(params => {
        if (transaction.unique_id) {
          return this.processingLogsService.getProcessingLogsList(transaction.unique_id);
        } else {
          return of(null);
        }
      })
    ).subscribe(value => {
      if (value != null) {
        this.processingLogs = value;
      }
    });
  }
}

我尝试过：

this.route.params.pipe(
  tap( params => {
        if(params['id']) {
          return this.transactionService.get(params['id']);
        } else {
          return of(null);
        }
      }),
      switchMap( value => this.processingLogsService.getProcessingLogsList(value.unique_id) )
  )

首先，我想使用http链接中的transactionService.get(params['id'])加载id。第二，在加载对象Transaction时，我想使用从第一个请求加载的getProcessingLogsList(transaction.unique_id)来加载unique_id。我的代码尝试遇到多个错误。运行代码时，结果为空。

编辑：我对此进行了测试，但是页面中的数据为空：

const transactionService = (x) => of(`transaction ${x}`);
    const processLog = (x) => of(`logged ${x}`);

    this.route.params.pipe(
      switchMap(x=> transactionService(x).pipe(
        switchMap(x=>processLog(x))
      ))
    ).subscribe(x=>console.log(x));

Answer 1

我相信您需要的是一串switchMap。像这样：

const routeparams = of('1');
const transactionService = (x) => of(`transaction ${x}`);
const processLog = (x) => of(`logged ${x}`);

routeparams.pipe(
  switchMap(x=> transactionService(x).pipe(
    switchMap(x=>processLog(x))
  ))
).subscribe(x=>console.log(x));

Answer 2

按照@ dK-的回答，您可以链接switchMap，但是您尝试过不采用固定方式吗？

routeparams.pipe(
    switchMap(x=> transactionService),
    switchMap(x=>processLog)
).subscribe(x=>console.log(x));

在这里看-> https://rxviz.com/v/EOe2L9ZJ

已编辑

好，你可以试试吗？一样，但是我重用了您的原始方法

ngOnInit() {
  this.route.params.pipe(
    map(params=>params['id']),
    switchMap(idParameter=> this.processingLogsService.getProcessingLogsList)
  ).subscribe(logList=>
      console.log(logList)
  );
}

按调用顺序实现switchMap

2 个答案: