chrome 取消了 RxJS forkJoin 的 http 请求

Question

我遇到了 RxJS 的 forkJoin 运算符和 http 请求被 chrome 取消的问题。

我有一组名为 validationSupportBatch$ 的可观察对象（即 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 请求）。

有人可以帮忙吗？

编辑:

请求如下headers:

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

和请求body（只是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 会阻止请求通过吗？

编辑 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( 的其他用途也不起作用...

参见示例。以下代码导致 cancelled 请求：

  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 的实例。因此被取消的请求...

chrome 取消了 RxJS forkJoin 的 http 请求

RxJS forkJoin's http requests being cancelled by chrome

rxjs

angular

angular-httpclient