如何依次订阅Observable类型的GraphQL请求？

首先要注意：你当前的代码里直接调用mutate生成的Observable会立即启动执行，无法实现“等待前一个完成再执行下一个”的逻辑。需要先把每个请求封装成返回Observable的工厂函数，这样可以按需触发执行。

方法一：使用RxJS concat操作符（RxJS环境推荐） #

concat操作符会严格按顺序订阅每个Observable，只有当前一个完成（无论成功/失败）才会订阅下一个。如果需要报错后继续执行，要给每个Observable添加错误捕获逻辑。

代码示例 #

// 1. 重构请求为工厂函数（调用时才执行mutate）
const requestFactories = [
  () => this.updateUserGQL.mutate({ input: { name: 'x' } }),
  () => this.updateUserGQL.mutate({ input: { name: 'y' } }),
  // 添加更多请求...
];

// 2. 使用concat构建顺序执行序列
import { concat, of } from 'rxjs';
import { catchError } from 'rxjs/operators';

const sequential$ = concat(
  ...requestFactories.map(factory => 
    factory().pipe(
      catchError(err => {
        console.error('请求失败:', err);
        // 返回完成态Observable，让concat继续执行下一个
        return of(null);
      })
    )
  )
);

// 3. 订阅开始执行
sequential$.subscribe({
  next: res => res && console.log('请求成功:', res),
  complete: () => console.log('所有请求执行完毕')
});

如果需要报错即终止后续请求，直接去掉catchError即可。

方法二：使用async/await循环（Promise环境推荐） #

将Observable转换为Promise，通过for循环依次等待每个请求完成，错误捕获后可选择继续执行。

代码示例 #

// 1. 同样先定义请求工厂函数
const requestFactories = [
  () => this.updateUserGQL.mutate({ input: { name: 'x' } }),
  () => this.updateUserGQL.mutate({ input: { name: 'y' } }),
  // 添加更多请求...
];

// 2. 用async函数执行循环
import { firstValueFrom } from 'rxjs';

async function runSequentialRequests() {
  for (const factory of requestFactories) {
    try {
      // 将Observable转为Promise并等待完成
      const result = await firstValueFrom(factory());
      console.log('请求成功:', result);
    } catch (err) {
      console.error('请求失败:', err);
      // 捕获错误后继续执行下一个，若要终止则抛出err
    }
  }
  console.log('所有请求执行完毕');
}

// 3. 启动执行
runSequentialRequests();

注：RxJS 7+推荐使用firstValueFrom/lastValueFrom替代旧的toPromise()方法。

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