RxJS forkJoin 的 http 请求被 chrome 取消

Question

我正面临 RxJS 的 forkJoin 运算符和 http 请求被 chrome 取消的问题。

我有一个名为 validationSupportBatch$ 的 observables（即 http 请求）数组。

我使用数组如下：

this.subscription.add(
  forkJoin<T>(validationSupportBatch$)
    .pipe(mergeMap(() => this.getByStandardActivityCode()))
    .subscribe((svs: T[]) => {
        this.validationSupports = svs;
        this.notificationService.success('SVS.SAVE.success');
      },
      error => this.notificationService.error('SVS.SAVE.failure')
    )
);

不幸的是，请求被 chrome 取消了（请参阅下面的截图，了解一批 3 个 http 请求）。

有人可以帮忙吗？

编辑：

以下是请求标头：

Provisional headers are shown
Accept: application/json, text/plain, */*
Authorization: Bearer XXX
Content-Type: application/json
Origin: https://localhost:4200
Referer: https://localhost:4200/validation/applied/activity/HHN-KADJAR-A0000020/standard-validation-support?planId=HHN-KADJAR-I001
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.157 Safari/537.36
x-validation-context: APPLIED
x-validation-project-family: HHN
x-validation-project-name: Kadjar
x-validation-project-scope: 39416543-6b07-4e92-afd5-afacb1f18975

和请求正文（只是 json）：

{"id":null,"nature":"PHYSICAL_POWERTRAIN","natureLabel":"Physical - Powertrain","numberOfDays":0,"requiredQty":2,"appliedActivity":{"code":"HHN-KADJAR-A0000020"}}

edit 2：奇怪的是，当我不将forkJoin 添加到subscription 时，请求工作正常。 我的代码现在是：

forkJoin<T>(validationSupportBatch$)
  .pipe(mergeMap(() => this.getByStandardActivityCode()))
  .subscribe((svs: T[]) => {
        this.validationSupports = svs;
        this.notificationService.success('SVS.SAVE.success');
      },
      error => this.notificationService.error('SVS.SAVE.failure')
 );

注意this.subscription.add( 部分已被删除。

知道为什么subscription 会阻止请求通过吗？

edit 3：这是我在组件中管理订阅的方式：

export abstract class ValidationSupportListComponent<T, U> implements OnInit, OnDestroy {

  subscription: Subscription = new Subscription();

  ...

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

  saveValidationSupports(supports: T[]) {
    const validationSupportBatch$ = _(supports)
      .filter(support => support.requiredQty > 0)
      .flatMap(support => _.times(support.requiredQty, () => this.saveValidationSupport(support)))
      .value();

    this.subscription.add(
      forkJoin<T>(validationSupportBatch$)
        .pipe(mergeMap(() => this.getByStandardActivityCode()))
        .subscribe((svs: T[]) => {
            this.validationSupports = svs;
            this.notificationService.success('SVS.SAVE.success');
          },
          error => this.notificationService.error('SVS.SAVE.failure')
        )
    );
  }

edit 4：我意识到组件内this.subscription.add( 的其他用途也不起作用...

例如看。以下代码导致取消请求：

  this.subscription.add(
    this.deleteValidationSupport(entity)
      .subscribe(() => this.removeFromModel(entity))
  );

Answer 1

我找到了解决问题的方法。

在组件的其中一个子类中，我的代码中有以下问题：

  this.subscription = this.planService
    .get(this.planId)
    .subscribe(plan => (this.direction = plan.direction));

它重新分配了 subscription 的实例。因此取消的请求...