如何运行 observable 取决于先前在 Angular 中使用 RxJS 的 observable 结果？

Question

I need to do these things:

• delete an item from remote server
• if it's success, delete item from local storage
• if it's success, reload the items from remote server

Now I have this code, but it's not working well, because the third step isn't run.

delete(model: T, paginate: PaginateInterface): Observable<any> {
  return this.remoteStorageService.delete(model).pipe(map((resultDelete: boolean) => {
    if (resultDelete) {
      this.localStorageService.delete(model);
      return this.remoteStorageService.getAll().pipe(map( (resultGetAll: PaginateInterface) => {
        return resultGetAll;
      }));
    }

    return paginate;
  }));
}

I tried to use RxJS switchMap function, but I'm totally lost.

How can I run a function depends on observable's result, and then another observable what return with results?

Answer 1

I assume steps 1 and 3 are the component's job and step 2 is the service's job.

You can use the tap method to do extra logic on success or failure of an observable:

Service:

deleteItem(model): Observable<any> {
  return this.http.delete<any>(`${yourUrl}`, model)
    .pipe(
      tap(result => {
        // success
        // delete from local storage here
      }, error => {
        // fail
        // in case you need logic for failure, put it here
      })
    );
}

Component:

delete(model) {
  this.yourService.deleteItem(model)
    .subscribe(result => {
      // success, local storage is updated at this point
      // reload your data
    }, error => {
      // fail, local storage was not updated
      // do your error handling logic here
    });
}

If step 2 needs to be done in the component, simply move the pipe code to your component.

Answer 2

From the code you posted and the comments I assume that remoteStorageService.delete and remoteStorageService.getAll() return some Observables while localStorageService.delete() returns void .

If this is the case you can try something like this

delete(model: T, paginate: PaginateInterface): Observable<any> {
  return this.remoteStorageService.delete(model)
  .pipe(
     concatMap((resultDelete: boolean) => {
        if (resultDelete) {
           this.localStorageService.delete(model);
           return this.remoteStorageService.getAll();
        } else {
           return EMPTY  // if the delete fails you complete the Observable
           // you can also error here if you want to terminate the Observable with an error
        }
     })
  )
}

The key here is that first you execute remoteStorageService.delete and wait for the Observable to notify its result. The use of the operator concatMap ensures that the Observables contained within concatMap are executed (or more precisely subscribed) only after remoteStorageService.delete notifies its result. You can use then the result of remoteStorageService.delete to decide whether to return remoteStorageService.getAll() or return EMPTY .

In the first case, remoteStorageService.getAll() will be the Observable subscribed by the Component, in the second case EMPTY will be the Observable subscribed by the Component. EMPY is an Observable which does not emit anything and immediately terminates.