基于Angular 5与RxJS实现串行/并行HTTP请求的技术问题

Hey there! Let's work through how to implement this sequence of HTTP requests properly using Angular 5 and RxJS. We need to handle both serial (step-by-step) and parallel (simultaneous) execution where it makes sense, so here's a practical solution:

First, let's outline the exact flow we need:

1. Serial: Wait for deleteAllItems() to succeed before moving on
2. Parallel + Serial per item: For each selected item, run addItem(itemId) followed by addItemLog(itemId) (serial per item), while processing all items in parallel
3. Serial: After all items are processed successfully, run addFlag()

Here's the code for your onSaveItems() method, with explanations:

onSaveItems(): void {
  // Start with deleting all existing items
  this.apiService1.deleteAllItems()
    .pipe(
      // Once deletion succeeds, handle all selected items
      switchMap(() => {
        // For each item, first add it, then log the addition (serial per item)
        const itemTasks = this.selectedItems.map(item => 
          this.apiService2.addItem(item.id)
            .pipe(
              // Wait for addItem to finish before calling addItemLog
              concatMap(() => this.apiService3.addItemLog(item.id))
            )
        );

        // Run all item tasks in parallel; wait for all to complete
        return forkJoin(itemTasks);
      }),
      // After all items are added and logged, set the flag
      switchMap(() => this.apiService4.addFlag())
    )
    .subscribe({
      next: () => {
        // Success: Notify user or update UI
        alert('Save completed successfully!');
      },
      error: (error) => {
        // Handle any error that occurs at ANY step in the flow
        console.error('Save failed:', error);
        alert('Oops! Something went wrong during save.');
      }
    });
}

Key RxJS Operators Explained #

• switchMap: Used to chain serial operations. It cancels the previous observable (if any) and switches to the new one once the current operation succeeds. Perfect for linking our deletion → item processing → flag setting steps.
• concatMap: Ensures that addItemLog only runs after addItem completes for each individual item. Use this if the log depends on the item being successfully added.
• forkJoin: Runs all item-related observables in parallel and only emits a result when every single one completes successfully. Great for batch processing independent tasks.

Optional: Parallelize addItem and addItemLog per item #

If the log doesn't depend on the item being added first (i.e., they can run at the same time), replace the concatMap with forkJoin for each item:

const itemTasks = this.selectedItems.map(item => 
  forkJoin([
    this.apiService2.addItem(item.id),
    this.apiService3.addItemLog(item.id)
  ])
);

Important Notes #

• Error Handling: The entire observable stream will fail immediately if any request fails. This is intentional—if deletion fails, we don't want to proceed with adding items, and if any item operation fails, we won't set the flag. You can adjust this with operators like catchError if you need partial success handling.
• Angular 5 Compatibility: All these operators (switchMap, concatMap, forkJoin) are available in RxJS 5.x (which ships with Angular 5), so no extra setup is needed.

内容的提问来源于stack exchange，提问作者Nikola Bogdanic