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

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

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

rxjs可观察的重用逻辑

1 个答案: