Angular循环中使用subscribe：如何判断所有后端请求完成后触发事件

我用以下代码实现便签更新功能：

update() {
this.tab3Service.updateStickyNote(this.stickyNoteUserConnection.stickyNote).subscribe(response => {
  const updatedStickyNote: StickyNote = response;
  for(let i = 0; i < this.stickyNoteUserConnections.length; i++) {
    this.stickyNoteUserConnections[i].stickyNote = updatedStickyNote;
    this.tab3Service.updateStickyNoteUserConnection(this.stickyNoteUserConnections[i]).subscribe(response => {
    }, error => {
      console.log(error);
    });
  }
  this.createdEditEvent.emit(); // 期望在后端所有保存完成后执行
  }, error => {
   console.log(error);
 });
}

当前代码中createdEditEvent.emit()会在for循环结束后立即执行，但我希望它在所有后端保存操作都完成后再触发，请问是否有可行的实现方式？

可以利用RxJS的forkJoin操作符来等待多个异步请求全部完成，具体改造如下：

1. 先完成updateStickyNote的请求，拿到更新后的便签数据
2. 遍历stickyNoteUserConnections，为每个条目生成更新请求的Observable，同时单独处理每个请求的错误，避免单个请求失败导致整个流程中断
3. 通过forkJoin等待所有更新请求完成后，再触发事件

改造后的代码：

import { forkJoin, of, switchMap } from 'rxjs';
import { catchError } from 'rxjs/operators';

update() {
  this.tab3Service.updateStickyNote(this.stickyNoteUserConnection.stickyNote).pipe(
    switchMap(updatedStickyNote => {
      // 批量生成所有更新请求的Observable数组
      const updateRequests = this.stickyNoteUserConnections.map(connection => {
        connection.stickyNote = updatedStickyNote;
        return this.tab3Service.updateStickyNoteUserConnection(connection).pipe(
          catchError(error => {
            console.log(error);
            return of(null); // 捕获错误后返回空Observable，保证forkJoin继续执行
          })
        );
      });

      // 等待所有请求完成
      return forkJoin(updateRequests);
    })
  ).subscribe({
    next: () => {
      this.createdEditEvent.emit(); // 所有后端操作完成后触发事件
    },
    error: err => {
      console.log(err);
    }
  });
}

额外说明 #

• forkJoin会在所有传入的Observable都执行完成后才发出结果，完美匹配"等待所有保存操作完成"的需求
• 如果需要保证请求按顺序串行执行（而非并行），可以将forkJoin(updateRequests)替换为concat(...updateRequests).pipe(toArray())，但并行请求在无依赖场景下效率更高
• 每个请求单独添加catchError是为了避免单个请求失败导致整个批量操作终止，如果你希望只要有一个请求失败就不触发事件，可以去掉每个请求的catchError，把错误处理放到最外层的subscribe里

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