Angular2中如何实现链式HTTP请求并拼接返回数据？

嘿，我完全理解你作为新手遇到这种嵌套Observable请求的困惑！其实用flatMap（或者mergeMap，两者在多数场景下行为一致）配合RxJS的其他操作符就能轻松搞定这个需求，我给你一步步拆解：

首先，我们明确需求流程：

1. 发起第一次HTTP请求，拿到包含一组URL和若干字符串的响应数据
2. 用拿到的每个URL发起第二次HTTP请求
3. 将第二次请求返回的数据和第一次请求对应的字符串拼接起来

先准备必要的导入 #

确保你已经导入了RxJS需要的操作符和工具：

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

场景1：等待所有第二次请求完成后再返回所有拼接结果 #

如果希望等所有第二次请求都成功返回后，一次性拿到所有拼接好的结果，适合用forkJoin配合flatMap：

// 先定义第一次请求返回的数据结构（方便类型提示）
interface FirstApiResponse {
  urls: string[];
  strings: string[];
}

constructor(private http: HttpClient) {}

fetchAndCombineData() {
  this.http.get<FirstApiResponse>('/your-first-api-url').pipe(
    // 用flatMap接收第一次请求的结果，返回新的Observable
    flatMap(firstResponse => {
      // 把每个URL转换成HTTP请求Observable
      const secondRequestObservables = firstResponse.urls.map(url => 
        this.http.get(url)
      );

      // forkJoin会等待所有Observable完成，然后返回结果数组
      return forkJoin(secondRequestObservables).pipe(
        // 在这里把第二次请求的结果和第一次的字符串拼接
        map(secondResponseArray => {
          // 假设每个URL对应一个字符串，按索引对应拼接
          return firstResponse.strings.map((str, index) => {
            // 这里可以根据你的需求调整拼接逻辑
            return `${str} - ${JSON.stringify(secondResponseArray[index])}`;
          });
        })
      );
    })
  ).subscribe(
    finalCombinedData => {
      console.log('最终所有拼接结果:', finalCombinedData);
      // 在这里处理最终数据
    },
    error => {
      console.error('请求过程出错:', error);
    }
  );
}

场景2：每完成一个第二次请求就返回对应的拼接结果 #

如果不需要等全部请求完成，而是希望每完成一个第二次请求就拿到对应的拼接结果，可以用from+mergeAll：

fetchAndCombineDataIncrementally() {
  this.http.get<FirstApiResponse>('/your-first-api-url').pipe(
    flatMap(firstResponse => {
      // 把urls数组转换成Observable流
      return from(firstResponse.urls).pipe(
        // 给每个URL绑定对应的字符串索引
        map((url, index) => {
          // 发起第二次请求，并拼接对应字符串
          return this.http.get(url).pipe(
            map(secondData => `${firstResponse.strings[index]} - ${JSON.stringify(secondData)}`)
          );
        }),
        // 合并所有Observable，每个请求完成就发出结果
        mergeAll()
      );
    })
  ).subscribe(
    singleCombinedData => {
      console.log('单个拼接结果:', singleCombinedData);
      // 在这里逐个处理拼接好的数据
    },
    error => {
      console.error('请求过程出错:', error);
    }
  );
}

关键概念解释 #

• flatMap/mergeMap：核心作用是将第一个Observable发出的值（也就是第一次请求的结果）转换成另一个Observable（这里是第二次请求的Observable集合），并将这些Observable的输出合并成一个新的Observable流。
• forkJoin：适合处理并行请求，会等待所有传入的Observable都完成后，一次性返回所有结果的数组。
• from：可以把普通数组转换成Observable流，让我们能逐个处理每个URL。
• mergeAll：把多个Observable合并成一个流，只要其中一个Observable发出值，就会立刻把这个值传递下去。

这样你就能完美实现两次请求+结果拼接的需求啦！

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