rxjs observable reusing logic

问题

I'm writing a angular file-upload component.

Upon successful upload, it displays a notice and two buttons:

replace : deletes uploaded file and opens the file-selector dialog
remove : deletes uploaded file and displays a notice

Deleting the uploaded file means making a HTTP DELETE request to a backend system and handling possible failure and retries.

_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())
  );
}

In this snippet I'm not dealing with possible failure and retries.

How can I extract the deletion logic to avoid repeating it in two methods?

Or more generically, how can I apply common transformations on two different observables?

Thank you!

回答1:

You can use the pipe method to create a custom operator like this:

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())
  );
}

The pipe function should be imported from rxjs:

import { pipe } from "rxjs";

来源：https://stackoverflow.com/questions/50907458/rxjs-observable-reusing-logic

标签

angular

rxjs