Question

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

我有一个名为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请求的批处理，请参见下面的屏幕截图）。

有人可以帮忙吗？

修改：

以下是请求标头：

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

chrome取消了RxJS forkJoin的http请求

1 个答案: