rxjs可观察的重用逻辑

Question

我正在编写一个有角度的文件上传组件。

成功上传后，它会显示一个通知和两个按钮：

• replace ：删除上传的文件并打开文件选择器对话框
• remove ：删除上传的文件并显示通知

删除上载的文件意味着向后端系统发出HTTP DELETE请求并处理可​​能的失败和重试。

_handleReplace() {
  this.replaceClicked$.pipe(
    tap((x) => this._backend.delete(this.file, this.fieldName)),
    tap((x) => openFileSelectorDialog())
  );
}

_handleRemove() {
  this.replaceClicked$.pipe(
    tap((x) => this._backend.delete(this.file, this.fieldName)),
    tap((x) => displayNotice())
  );
}

在此代码段中，我不会处理可能的失败和重试。

如何提取删除逻辑以避免在两种方法中重复进行？

或更笼统地说，如何将常见的变换应用于两个不同的可观察对象？

谢谢！

Answer 1

您可以使用pipe方法来创建一个自定义运算符，如下所示：

deleteFile = () => pipe(
    tap((x) => this._backend.delete(this.file, this.fieldName))
  );    

_handleReplace() {
  this.replaceClicked$.pipe(
    deleteFile(),
    tap((x) => openFileSelectorDialog())
  );
}

_handleRemove() {
  this.replaceClicked$.pipe(
    deleteFile(),
    tap((x) => displayNotice())
  );
}

管道函数应从rxjs导入：

import { pipe } from "rxjs";