RxJS forkJoin 的 http 请求被 chrome 取消

Question

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

我有一个名为 的可观察对象数组（即 http 请求）validationSupportBatch$。

我按如下方式使用该数组：

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

编辑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会阻止请求通过吗？

编辑 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')
        )
    );
  }

编辑 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。因此取消的请求...