RxJS可观察对象链式HTTP调用问题：仅执行首个调用

嘿，我之前也踩过这个RxJS链式调用的坑！这种情况十有八九是操作符用错了，或者第一个Observable的处理有问题，导致第二个请求根本没被触发。咱们一步步来排查解决：

1. 最容易踩的坑：用错了映射操作符 #

如果你的第一个HTTP请求是单值Observable（比如Angular HttpClient的post），要把它的结果传给第二个请求，绝对不能用map，得用高阶映射操作符比如switchMap（或者mergeMap/concatMap，根据你的需求选）。

错误示例（第二个请求不会触发） #

// 用map的话，只会返回一个Observable的Observable，不会自动订阅内部请求
this.http.post('/api/create-object', newObj)
  .map(createRes => {
    const newId = createRes.id;
    return this.http.get(`/api/object-details/${newId}`);
  })
  .subscribe();

正确示例（用switchMap flatten流） #

this.http.post('/api/create-object', newObj)
  .pipe(
    switchMap(createRes => {
      const newId = createRes.id;
      // switchMap会自动订阅内部的HTTP请求Observable，把结果传递下去
      return this.http.get(`/api/object-details/${newId}`);
    })
  )
  .subscribe(
    detailRes => console.log('拿到详情数据：', detailRes),
    err => console.error('请求出错：', err)
  );

2. 确认第一个请求真的发出了值 #

有时候第一个请求可能因为参数错误、后端异常等原因没返回数据，导致后续链断裂。可以加个tap操作符验证：

this.http.post('/api/create-object', newObj)
  .pipe(
    tap(createRes => console.log('第一个请求的响应：', createRes)), // 看控制台有没有输出
    switchMap(createRes => this.http.get(`/api/object-details/${createRes.id}`))
  )
  .subscribe();

如果这里没输出，先去排查第一个请求的问题：检查请求URL、参数、后端返回状态码。

3. 确保订阅了整个链式Observable #

别犯这种低级错误：只订阅了第一个请求，没订阅组合后的整个流！

错误示例 #

const createRequest$ = this.http.post('/api/create-object', newObj);
createRequest$.subscribe(); // 只订阅了第一个请求
const detailRequest$ = createRequest$.pipe(switchMap(res => this.http.get(`/api/object-details/${res.id}`)));
// 这里没订阅detailRequest$，所以第二个请求不会执行

正确示例 #

// 把整个链组合成一个Observable，再订阅它
const combinedRequest$ = this.http.post('/api/create-object', newObj)
  .pipe(switchMap(res => this.http.get(`/api/object-details/${res.id}`)));
combinedRequest$.subscribe();

4. 别忘了错误处理 #

如果第一个请求抛出错误，整个Observable链会直接终止，第二个请求自然不会执行。可以加catchError来兜底：

import { EMPTY } from 'rxjs';
import { catchError } from 'rxjs/operators';

this.http.post('/api/create-object', newObj)
  .pipe(
    switchMap(createRes => this.http.get(`/api/object-details/${createRes.id}`)),
    catchError(err => {
      console.error('请求出错：', err);
      return EMPTY; // 返回空流，或者返回默认值让链继续
    })
  )
  .subscribe();

对照上面的几点检查你的代码，大概率能解决第二个请求不触发的问题！

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