如何在RxJS/Angular 6中合并相互依赖的HTTP请求？

嘿，我完全懂你的困扰——你想要把第二个请求的结果作为属性合并到第一个请求返回的对象里，而不是只拿到第二个请求的输出对吧？咱们来把你的代码调整一下，就能实现这个需求了。

首先，你之前用switchMap搭配forkJoin只返回第二个结果，大概率是因为在switchMap里只把第二个请求放进了forkJoin，没把第一个请求的结果保留并合并进去。咱们换个思路：

基础场景：两个串行依赖请求合并 #

假设第一个请求是获取用户信息，第二个请求根据用户ID获取他的帖子，最终要得到包含帖子列表的用户对象。你可以这么写：

import { switchMap, map } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

// 注入HttpClient后使用
this.http.get('/api/users/1').pipe(
  switchMap(user => {
    // 先拿到第一个请求的user数据，再发起第二个请求
    return this.http.get(`/api/posts?userId=${user.id}`).pipe(
      // 把第二个请求的posts结果合并到user对象上
      map(posts => ({ ...user, posts }))
    );
  })
).subscribe(combinedData => {
  // 这里的combinedData就是 { id: 1, name: 'xxx', posts: [...] }
  console.log('合并后的结果:', combinedData);
});

进阶场景：多个并行依赖请求合并 #

如果除了帖子，你还想同时获取用户的评论（同样依赖用户ID），可以用forkJoin来并行发起这两个请求，再一起合并：

import { switchMap, map } from 'rxjs/operators';
import { forkJoin } from 'rxjs';
import { HttpClient } from '@angular/common/http';

this.http.get('/api/users/1').pipe(
  switchMap(user => {
    // 并行发起posts和comments请求
    return forkJoin([
      this.http.get(`/api/posts?userId=${user.id}`),
      this.http.get(`/api/comments?userId=${user.id}`)
    ]).pipe(
      // 把两个请求的结果都合并到user对象
      map(([posts, comments]) => ({ ...user, posts, comments }))
    );
  })
).subscribe(combinedData => {
  // combinedData包含用户信息、帖子列表、评论列表
  console.log('合并后的结果:', combinedData);
});

关键要点说明： #

• switchMap的作用是等待第一个请求完成，然后用它的结果触发后续请求，同时取消之前可能未完成的请求（适合这种依赖场景）。
• 用map操作符来合并结果时，使用对象展开运算符...user是为了创建新对象，避免修改原请求返回的对象，这在Angular的变更检测里是个好习惯，能减少不必要的问题。
• 如果是多个并行的依赖请求，forkJoin会等待所有请求都完成后再返回结果，适合这种不需要顺序、只需要所有结果的场景。

这样调整后，你就能得到包含两个请求结果的合并对象啦！

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