Angular中如何在首个服务请求成功后按顺序调用后续服务

Angular中处理有前后依赖关系的顺序HTTP请求，推荐使用RxJS的concatMap操作符，它会等待前一个Observable完成后再触发下一个，同时支持将前一个请求的返回值作为入参传入后续请求，完美匹配你的需求。

1 先修正Service代码语法问题 #

你提供的Service代码中upload方法缺少闭合大括号，修正后代码如下：

upload(fileToUpload: any) {
  let input = new FormData();
  input.append("file", fileToUpload);
  return this.http.post<any>('https://localhost:5001/', input);
}

language(data: any) {
  return this.http.post<any>('https://localhost:5002', data);
}

getDetails(data: any) {
  return this.http.post<any>('https://localhost:5003', data);
}

2 修改组件调用逻辑 #

首先导入需要的RxJS操作符：

import { concatMap } from 'rxjs/operators';

然后修改你的Demo方法，用concatMap串联三个请求：

Demo(): any {
  if (fileToUpload) {
    this._voiceboxService.upload(fileToUpload)
      .pipe(
        // 上传请求完成后，调用language接口
        concatMap((uploadRes: any) => {
          this.text = uploadRes.prediction;
          console.log('上传接口返回：', uploadRes);
          return this._voiceboxService.language(uploadRes);
        }),
        // language请求完成后，调用getDetails接口
        concatMap((languageRes: any) => {
          console.log('语言识别接口返回：', languageRes);
          return this._voiceboxService.getDetails(languageRes);
        })
      )
      .subscribe({
        next: (detailsRes: any) => {
          // 三个请求全部执行成功后的最终处理
          console.log('详情接口返回，全部请求完成：', detailsRes);
          // 此处添加后续业务逻辑即可
        },
        error: (err) => {
          // 任意一个请求报错都会进入该回调，统一处理异常
          console.error('请求过程出错：', err);
        }
      });
  } else {
    console.log("FileToUpload was null or undefined.");
  }
}

逻辑说明 #

• 三个请求严格按照upload→language→getDetails的顺序执行，前一个请求未完成不会发起下一个
• 每个请求的返回值可以直接作为入参传入下一个请求，也可以按需提取返回值中的指定字段传递
• 任意一步请求报错会直接终止后续请求，进入error回调，符合常规业务异常处理逻辑
• 避免了嵌套subscribe产生的回调地狱问题，代码可读性和可维护性更高

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