如何在RxJS中顺序发起两个HTTP请求并返回两次请求数据

你只需要在switchMap内部，将第二个请求的结果与第一个请求的数据**组合成一个对象（或数组）**返回即可，这样订阅时就能同时拿到两组数据。

修改后的代码如下：

.post<unknown>(
  `${this.nextApiEndpoint}ProgramReview/GetAssessmentQuestionNumber`,
  body,
  {}
)
.pipe(
  switchMap((firstData) => {
    // 发起第二个请求，同时保留第一个请求的数据
    return this.http.post<any>(
      `${this.nextApiEndpoint}ProgramReview/GetProgramReviewQuestion`,
      { studentId: args.studentId, questionId: firstData, programReviewId: args.programReviewId },
      {}
    ).pipe(
      // 将两个请求的数据组合成一个对象
      map(secondData => ({ firstData, secondData }))
    );
  }),
  catchError((err) => {
    // 注意：catchError必须返回Observable，原代码直接return err会导致错误被当作正常数据发射
    return throwError(() => err);
  })
);

组件订阅时的使用方式： #

this.yourService.yourFunction().subscribe({
  next: (combinedData) => {
    // 第一个请求的数据
    console.log('首次请求数据:', combinedData.firstData);
    // 最终请求的数据
    console.log('最终请求数据:', combinedData.secondData);
  },
  error: (err) => {
    // 处理错误
  }
});

补充说明： #

• 原代码中post<RxObservable<unknown>>的泛型写法有误，应该改为post<unknown>（RxJS的HTTP请求方法返回的是Observable类型，不需要在泛型里指定RxObservable）。
• catchError操作符必须返回一个Observable，原代码直接返回err会导致错误被转化为正常流发射，正确的做法是用throwError重新抛出错误，或者返回EMPTY等空流。

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