Angular 15实现顺序请求：仅当前请求返回200时发起下一个

问题描述 #

当前todasGuias()方法通过循环同时发起多个请求，需要改为串行执行：只有前一个请求返回HTTP 200成功响应时，才发起下一页的请求。

解决方案 #

利用RxJS的异步流处理能力，以下是两种实用的实现方式：

方式一：递归调用（直观易维护） #

修改home.component.ts中的todasGuias方法，通过递归实现串行请求：

todasGuias() {
  this.page = 1;

  // 定义递归函数处理分页请求
  const fetchNextPage = () => {
    // 终止条件：页码超过总页数
    if (this.page > this.listaGuias.TotalPages) {
      console.log('所有分页请求完成');
      return;
    }

    this.homeService.getGuias(this.year, this.month, this.glosadas, this.page)
      .subscribe({
        next: (data) => {
          this.listaGuias = data.Dados[0];
          console.log(this.listaGuias.ResultList);
          // 当前请求成功，页码递增后发起下一页请求
          this.page++;
          fetchNextPage();
        },
        error: (err) => {
          console.error(`第${this.page}页请求失败，终止后续请求:`, err);
          // 可添加业务错误处理，比如弹窗提示用户
        }
      });
  };

  // 启动第一个请求
  fetchNextPage();
}

方式二：RxJS函数式风格（concatMap + range） #

用RxJS的range生成页码序列，结合concatMap串行执行请求，更符合响应式编程风格：

// 先导入所需RxJS操作符
import { range, concatMap, catchError, EMPTY } from 'rxjs';

todasGuias() {
  this.page = 1;

  // 生成从1到总页数的页码序列
  range(this.page, this.listaGuias.TotalPages)
    .pipe(
      // concatMap确保前一个请求完成后才执行下一个
      concatMap(pageNum => 
        this.homeService.getGuias(this.year, this.month, this.glosadas, pageNum)
          .pipe(
            // 捕获错误，返回EMPTY终止后续流
            catchError(err => {
              console.error(`第${pageNum}页请求失败，终止后续请求:`, err);
              return EMPTY;
            })
          )
      )
    )
    .subscribe({
      next: (data) => {
        this.listaGuias = data.Dados[0];
        console.log(this.listaGuias.ResultList);
      },
      complete: () => {
        console.log('所有分页请求完成');
      }
    });
}

关键说明 #

• 确保this.listaGuias.TotalPages在调用todasGuias前已正确赋值，如果初始时未知总页数，需要先发起一次请求获取TotalPages后再启动串行流程。
• 若需要在某个请求失败后继续发起后续请求，可修改catchError的逻辑，比如返回of(null)而非EMPTY，并在next中判断是否跳过无效数据。
• 所有RxJS操作符需提前导入，避免编译错误。

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