如何運行 observable 取決於先前在 Angular 中使用 RxJS 的 observable 結果？

Question

我需要做這些事情：

• 從遠程服務器刪除項目
• 如果成功，從本地存儲中刪除項目
• 如果成功，從遠程服務器重新加載項目

現在我有了這個代碼，但它運行得不好，因為第三步沒有運行。

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

我嘗試使用 RxJS switchMap 函數，但我完全迷失了。

我如何運行一個函數取決於 observable 的結果，然后另一個 observable 返回什么結果？

Answer 1

我假設第 1 步和第 3 步是組件的工作，第 2 步是服務的工作。

您可以使用tap方法對 observable 的成功或失敗執行額外的邏輯：

服務：

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

成分：

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

如果需要在組件中完成第 2 步，只需將pipe代碼移動到您的組件中即可。

Answer 2

根據您發布的代碼和評論，我假設remoteStorageService.delete和remoteStorageService.getAll()返回一些 Observables 而localStorageService.delete()返回void 。

如果是這種情況，您可以嘗試這樣的操作

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

這里的關鍵是先執行remoteStorageService.delete ，等待Observable通知結果。 運算符concatMap的使用確保concatMap中包含的 Observable 僅在remoteStorageService.delete通知其結果后才執行（或更准確地說是訂閱）。 然后您可以使用remoteStorageService.delete的結果來決定是返回remoteStorageService.getAll()還是返回EMPTY 。

在第一種情況下， remoteStorageService.getAll()將是組件訂閱的 Observable，在第二種情況下， EMPTY將是組件訂閱的 Observable。 EMPY是一個 Observable，它不發出任何東西並立即終止。