Angular+RxJs实现数组元素顺序调用删除API并获取数据

在Angular+RxJS场景下，要严格按顺序执行批量删除请求，且全部完成后获取最新数据，可以用以下两种常用方案：

方案一：使用concat批量订阅删除请求 #

concat会按顺序执行传入的Observable，只有前一个执行完成才会触发下一个。结合数组map生成每个id对应的删除请求Observable，再用finalize在所有操作完成后调用获取数据的接口：

import { from, concat, EMPTY } from 'rxjs';
import { finalize, catchError } from 'rxjs/operators';

// 遍历ids生成每个删除请求的Observable，可选添加错误处理避免中断整个序列
const deleteRequests = this.ids.map(id => 
  this.controller.deleteItem(id).pipe(
    catchError(err => {
      console.error(`删除ID ${id}失败:`, err);
      return EMPTY; // 出错后返回EMPTY，不终止后续请求
    })
  )
);

concat(...deleteRequests)
  .pipe(
    finalize(() => {
      // 所有删除操作完成（包括出错跳过的），获取最新数据
      this.controller.getData().subscribe(data => {
        // 在这里处理获取到的最新数据
      });
    })
  )
  .subscribe({
    next: () => console.log('单个条目删除完成'),
    error: (err) => console.error('全局错误:', err)
  });

方案二：使用concatMap遍历执行 #

通过from把ids数组转成Observable序列，再用concatMap将每个id映射为删除请求，确保顺序执行。最后可以链式调用concatMap直接衔接获取数据的请求：

import { from, EMPTY } from 'rxjs';
import { concatMap, catchError } from 'rxjs/operators';

from(this.ids)
  .pipe(
    concatMap(id => 
      this.controller.deleteItem(id).pipe(
        catchError(err => {
          console.error(`删除ID ${id}失败:`, err);
          return EMPTY;
        })
      )
    ),
    // 所有删除完成后，执行getData并返回其结果
    concatMap(() => this.controller.getData())
  )
  .subscribe({
    next: (latestData) => {
      // 直接拿到getData返回的最新数据
      console.log('最新数据:', latestData);
    },
    error: (err) => console.error('操作出错:', err)
  });

关键注意事项 #

• 两种方案都保证严格顺序执行，前一个删除请求完成（成功或被错误处理）后才会发起下一个
• 如果不需要容错（即某个删除失败就终止全部操作），可以去掉catchError和EMPTY部分
• 注意在subscribe中处理错误，避免未捕获的Observable错误导致应用异常

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