RxJS concat操作符链式调用API未按预期工作问题排查

concat操作符的参数是同步求值的：你在构造concat入参的时候，this.secondCall(this.dataFromFirstCall)就已经被执行了，此时第一个HTTP请求还未发起，类属性dataFromFirstCall还没有被赋值，传入secondCall的入参自然是undefined。

你观察到的「第二个接口调用逻辑先于第一个接口返回值赋值执行」完全符合代码实际执行顺序：

1. 构造函数执行，调用concat()时同步计算两个入参：
   • 第一个入参是firstCall()返回的Observable，此时只创建请求流，还没发起实际请求
   • 第二个入参是secondCall(this.dataFromFirstCall)，直接同步执行secondCall方法，打印出undefined 'Second call'，再返回第二个请求的Observable
2. concat订阅后开始按顺序执行流，发起第一个接口请求
3. 第一个接口返回后，给this.dataFromFirstCall赋值，打印First call
4. 第一个流完成，开始执行已经提前创建好的第二个接口请求

顺序依赖的HTTP请求不要靠类属性中转传值，直接用RxJS的高阶映射操作符衔接流，在第一个流返回后再构造第二个请求的Observable，从根源上避免时序问题。

推荐用concatMap实现（HTTP请求是单值流，用switchMap效果一致）：

import { concatMap, tap } from 'rxjs/operators';

dataFromFirstCall: any;
constructor(private http: HttpClient) {
  // 直接从第一个请求的流开始链式调用
  this.firstCall()
    .pipe(
      concatMap(firstResponse => {
        // 这里拿到的一定是第一个接口的有效返回值
        this.dataFromFirstCall = firstResponse; // 需要存类属性就赋值
        return this.secondCall(firstResponse); // 传入第一个接口返回值构造第二个请求
      })
    )
    .subscribe({
      next: secondResponse => console.log('第二个接口返回值：', secondResponse),
      error: err => console.error('请求出错', err)
    });
}

firstCall() {
  return this.http.get('assets/dummyData.json').pipe(
    tap(data => console.log('First call 返回值：', data))
  );
}

secondCall(response: any) {
  console.log('Second call 入参：', response);
  return this.http.get('assets/dummyData2.json');
}

如果你一定要保留concat的写法，可以用defer包裹第二个流，实现延迟求值：等第一个流完成、开始订阅第二个流的时候，才执行secondCall读取最新的dataFromFirstCall值：

import { concat, defer } from 'rxjs';

constructor(private http: HttpClient) {
  concat(
    this.firstCall(),
    // defer接收一个返回Observable的函数，只有被订阅时才会执行
    defer(() => this.secondCall(this.dataFromFirstCall))
  ).subscribe();
}

注意：这种靠类属性共享值的写法很容易因为时序问题出现undefined、脏值问题，生产环境优先用流内传参的concatMap方案，逻辑更内聚、可维护性更高。

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