Angular 12如何使用Subscribe方法串行调用多个REST API并传递参数

你遇到的undefined问题本质是异步执行时序不匹配：Angular的HttpClient调用返回的是RxJS Observable对象，subscribe()的回调函数只会在接口异步响应后才执行，而你写在subscribe()外面的打印、第二个接口调用代码是同步立即执行的，此时第一个接口还没返回，globalVar1自然还没被赋值。

Angular生态原生适配RxJS，用switchMap/concatMap操作符可以优雅实现串行依赖调用，不需要额外声明全局变量存中间值：

import { switchMap } from 'rxjs/operators';

ngOnInit() {
  this.apiService.getFirstAPICall(request)
    .pipe(
      // 第一个接口返回后，拿到结果调用第二个接口
      switchMap(globalVar1 => this.apiService.getSecondAPICall(globalVar1)),
      // 第二个接口返回后，拿到结果调用第三个接口
      switchMap(globalVar2 => this.apiService.getThirdAPICall(globalVar2))
    )
    .subscribe(globalVar3 => {
      // 所有接口调用完成，拿到最终结果
      this.globalVar3 = globalVar3;
      // 后续业务逻辑写在这里
    }, err => {
      // 处理任意环节的接口报错
      console.error('接口调用失败', err);
    })
}

该方案可以天然适配中途取消请求、统一错误处理等场景，符合Angular开发最佳实践。

如果不习惯RxJS操作符，可以将Observable转为Promise，用await等待异步执行完成后再执行后续逻辑：

// Angular 12及以下，RxJS版本低于7时使用toPromise()
async ngOnInit() {
  try {
    // 等待第一个接口返回再往下执行
    this.globalVar1 = await this.apiService.getFirstAPICall(request).toPromise();
    console.log(this.globalVar1); // 此处可正常拿到返回值
    
    // 等待第二个接口返回再往下执行
    this.globalVar2 = await this.apiService.getSecondAPICall(this.globalVar1).toPromise();
    console.log(this.globalVar2); // 此处可正常拿到返回值

    // 调用第三个接口
    this.globalVar3 = await this.apiService.getThirdAPICall(this.globalVar2).toPromise();
  } catch (err) {
    // 统一处理所有接口报错
    console.error('接口调用失败', err);
  }
}

如果你使用Angular 12以上版本，RxJS 7+已将toPromise()标记为废弃，可替换为firstValueFrom：

import { firstValueFrom } from 'rxjs';

async ngOnInit() {
  try {
    this.globalVar1 = await firstValueFrom(this.apiService.getFirstAPICall(request));
    this.globalVar2 = await firstValueFrom(this.apiService.getSecondAPICall(this.globalVar1));
    this.globalVar3 = await firstValueFrom(this.apiService.getThirdAPICall(this.globalVar2));
  } catch (err) {
    console.error('接口调用失败', err);
  }
}

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