如何在Angular中实现循环内可取消的顺序API调用？

核心思路 #

用RxJS的concatMap保证API调用的顺序执行，通过Subject创建取消信号，结合takeUntil操作符在用户触发取消时终止整个执行流。

实现步骤 #

1. 封装API调用为Observable #

将每个API调用转为RxJS Observable，推荐用RxJS自带的ajax（自动支持请求中止），也可以基于fetch封装：

import { from, Subject } from 'rxjs';
import { concatMap, takeUntil, finalize } from 'rxjs/operators';
import { ajax } from 'rxjs/ajax';

// 用ajax封装API，自动支持取消时中止请求
const api1 = (a: string) => ajax.getJSON(`/api1?a=${a}`);
const api2 = (b: string) => ajax.getJSON(`/api2?b=${b}`);
const api3 = (c: string) => ajax.getJSON(`/api3?c=${c}`);

// 若用fetch，需结合AbortController实现请求中止（可选）
// const api1 = (a: string, signal?: AbortSignal) => 
//   from(fetch(`/api1?a=${a}`, { signal }).then(res => res.json()));

2. 创建取消信号与执行流 #

定义参数列表，构建顺序执行的Observable流，并绑定取消信号：

// 你的参数列表
const paramsList = [
  {a: '1a', b: '1b', c: '1c'},
  {a: '2a', b: '2b', c: '2c'},
  {a: '3a', b: '3b', c: '3c'}
];

// 取消信号Subject，用于接收UI触发的取消事件
let cancel$: Subject<void>;

// 启动执行的函数
function startExecution() {
  // 先终止之前的执行（如果存在）
  if (cancel$) {
    cancel$.next();
    cancel$.complete();
  }
  cancel$ = new Subject<void>();

  // 构建执行流：逐个处理参数组，每组内依次调用三个API
  const execution$ = from(paramsList).pipe(
    concatMap(param => 
      // 组内三个API顺序执行，必须前一个完成才会执行下一个
      api1(param.a).pipe(
        concatMap(() => api2(param.b)),
        concatMap(() => api3(param.c))
      )
    ),
    takeUntil(cancel$), // 监听取消信号，触发后立即终止整个流
    finalize(() => console.log('执行已结束（完成或被取消）'))
  );

  // 订阅流，处理结果、错误和完成事件
  execution$.subscribe({
    next: () => console.log('当前参数组的三个API调用完成'),
    error: (err) => console.error('API调用出错:', err),
    complete: () => console.log('所有参数组的API调用已完成')
  });
}

3. 绑定UI按钮事件 #

给启动和取消按钮绑定对应的事件处理逻辑：

// 绑定启动按钮
document.getElementById('startBtn')?.addEventListener('click', startExecution);

// 绑定取消按钮
document.getElementById('cancelBtn')?.addEventListener('click', () => {
  if (cancel$) {
    cancel$.next();
    cancel$.complete();
  }
});

关键说明 #

• 顺序执行保障：concatMap操作符会等待上一个Observable完成后，才会订阅并执行下一个Observable，确保参数组之间、组内的API调用都是顺序执行的。
• 取消逻辑：takeUntil(cancel$)会在cancel$发出信号时，立即终止整个执行流，不管当前正在执行哪个API调用；如果用ajax封装API，会自动中止未完成的HTTP请求。
• 重复执行处理：每次启动新的执行前，先终止之前的流，避免多个执行流同时运行。

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