当 api 返回 404 时，Observable completed 没有被调用，当 api 失败时有任何替代解决方案吗？答案

【问题标题】：Observable completed is not getting called when api returns 404, any alternate solutions when the api fails?当 api 返回 404 时，Observable completed 没有被调用，当 api 失败时有任何替代解决方案吗？
【发布时间】：2020-08-07 07:16:22
【问题描述】：

  onSave(payload) {
this.loading = true;
const addIdp = this.identityProviderService.save(payload);
this.autoUnsubscribe(addIdp.subscribe((data) => {
  this.notificationsService.success(this.translateService.instant('idp.form.add-success'), '');
  this.ref.close(data);
}, (error) => {
  this.notificationsService.error(this.translateService.instant('idp.form.add-error'), '');
}, () => {
  this.loading = false;
}));

}

identityProviderService.save 调用中有 httpClient

【问题讨论】：

你最后在哪里使用？

标签： angular rxjs observable httpclient

【解决方案1】：

在你的错误块里面检查错误状态：

(error) => {
    if (error.status === 404) {
        // custom code goes here
    }
  this.notificationsService.error(this.translateService.instant('idp.form.add-error'), '');
}

这应该做的工作!!!

【讨论】：

【解决方案2】：

在error 通知的情况下，可观察对象不会触发complete 通知。它们是互斥的，这意味着如果流出错，之后就不能complete 或next。并且如果流完成，之后就不能error 或next。

因此，您需要使用 catchError 运算符块或在 error 回调块中处理错误。

试试下面的

onSave(payload) {
  this.loading = true;
  const addIdp = this.identityProviderService.save(payload);
  this.autoUnsubscribe(addIdp.subscribe(
    (data) => {
      this.loading = false;             // <-- set variable here
      this.notificationsService.success(this.translateService.instant('idp.form.add-success'), '');
      this.ref.close(data);
    }, 
    (error) => {
      this.loading = false;             // <-- and here
      this.notificationsService.error(this.translateService.instant('idp.form.add-error'), '');
    }
  );
}

或者您可以使用finalize 运算符。来自文档，

[it] 将在源终止时调用指定函数完成或错误。

onSave(payload) {
  this.loading = true;
  const addIdp = this.identityProviderService.save(payload).pipe(
    finalize(() => this.loading = false)                   // <-- set variable here
  );
  this.autoUnsubscribe(addIdp.subscribe(
    (data) => {
      this.notificationsService.success(this.translateService.instant('idp.form.add-success'), '');
      this.ref.close(data);
    }, 
    (error) => {
      this.notificationsService.error(this.translateService.instant('idp.form.add-error'), '');
    }
  );
}

【讨论】：

确实，不要将“完成”与“终于”混淆。 Observables 没有“最终”。

【解决方案3】：

您应该在订阅之前调用 finally，如下所示：

addIdp
  .finally(() => this.loading = false) // <<-- Call it here
  .subscribe((data) => {
    this.notificationsService.success(this.translateService.instant('idp.form.add-success'), '');
    this.ref.close(data);
  }, (error) => {
    this.notificationsService.error(this.translateService.instant('idp.form.add-error'), '');
  });

【讨论】：

finalize 和 finalize 都不存在于 Observable 类型上，这就是我得到的
finally 在 RxJS 的较新版本中被 finalize 替换，并且应该使用 pipe() 函数进行管道传递。