如何顺序调用Http请求并将结果推送到不同的列表中？

Question

我有多个 http 请求按顺序调用，

const req = [
  this.domainService.getDomain(filterNG).pipe(map(resp => resp.data), finalize(() => this.loadingNG = false)),
  this.domainService.getDomain(filterCodAML).pipe(map(resp => resp.data), finalize(() => this.loadingCodAML = false)),
  this.domainService.getDomain(filterTipoRating).pipe(map(resp => {
    resp.data.unshift({code: this.TIPO_RATING_ALL, description: this.translate.instant('tutti')});
    return resp.data;
  }), finalize(() => this.loadingTipiRating = false)),
  this.komodoService.listProvince$().pipe(finalize(() => this.loadingProvince = false)),
  this.domainService.getDomain(filterGRA).pipe(map(resp => resp.data), finalize(() => this.loadingGRA = false)),
  this.anagraficaService.getListaFiliali({filter: {all: false}})
    .pipe(map(resp => resp.data), finalize(() => this.loadingFiliali = false))

]

我使用concatMap开始按顺序调用 http 请求。

from(req).pipe(
  concatMap((request) => request.pipe()),
).subscribe(resp => { console.log(resp)})

我的问题和目的是我想将每个resp推送到不同的列表中，因为每个 http 服务返回不同的响应和值，我必须在不同的 html 列表中使用它们。

我不知道如何保存每个返回的响应，因为它返回单个 object 而不是数组，它每次只发出一个 object。

Answer 1

使用forkJoin

forkJoin(req).subscribe(arrayOfResponss=>doSomethingWithIt)

Answer 2

您可以为所有请求创建一个 object 并使用您将传递给subscribe()处理程序的不同密钥来区分它来自哪里：

import { of, map, concatMap, from } from 'rxjs';

const sources = {
  key1: of(123),
  key2: of('abc'),
};

from(Object.entries(sources))
  .pipe(
    concatMap(([key, obs$]) => obs$.pipe(
      map(result => ({ key, result })),
    ))
  )
  .subscribe(console.log);

工作演示： https://stackblitz.com/edit/rxjs-lgagzk?devtoolsheight=60&file=index.ts

Answer 3

我创建了一个完整的工作示例，其中包含一系列可观察对象，这些可观察对象会在每次已解析可观察对象时更新视图时按顺序加载。

单击此处查看我的 stackblitz 示例

或者查看下面的代码片段：

接口：

interface Sources {
  [key: string]: Observable<any>;
}

interface KeyValuePair {
  key: string;
  result: any;
}

组件.ts：

我使用scan -operator 将每个新发射添加到已经包含先前发射的数组中：

listWrappers$: Observable<KeyValuePair[]>;

ngOnInit(): void {
  const sources$: Sources = {
    list1: of([10000, 2999]),
    list2: of(['Patrick', 'Paul']),
  };

  this.listWrappers$ = of(...Object.entries(sources$)).pipe(
    concatMap(([key, obs$]) => obs$.pipe(map((result) => ({ key, result })))),
    scan((acc, curr) => [...acc, curr] as KeyValuePair[], [] as KeyValuePair[]
    )
  );
}

组件.html

<ng-container *ngIf="listWrappers$ | async as keyValuePairs">
  <ng-container *ngFor="let pair of keyValuePairs">

    <ng-container *ngIf="pair.key === 'list1'">
      <b>List 1</b>
      <ul>
        <li *ngFor="let item of pair.result">
          {{ item }}
        </li>
      </ul>
    </ng-container>

    <ng-container *ngIf="pair.key === 'list2'">
      <b>List 2</b>
      <ul>
        <li *ngFor="let item of pair.result">
          {{ item }}
        </li>
      </ul>
    </ng-container>

  </ng-container>
</ng-container>