Angular 4/5多GET请求问题：SWAPI嵌套URL查询实现

我之前对接SWAPI时也碰到过这种嵌套URL的问题，用RxJS的操作符就能完美解决。下面是具体的实现思路和代码示例：

1. 先封装单个资源的通用查询方法 #

首先写一个复用性高的方法，专门用来根据URL获取单个资源，避免重复写请求逻辑：

getSingleResource(url: string): Observable<any> {
  return this.http.get(url);
}

2. 改造角色查询方法，处理嵌套数据 #

假设你的角色数据里，homeworld是单个资源URL，films是一组资源URL数组。我们可以先获取初始角色列表，再对每个角色发起嵌套请求，最后把结果合并到原对象中：

getCharactersWithNestedData(page?: string): Observable<any[]> {
  // 先获取初始的角色列表数据
  return this.getData(page).pipe(
    mergeMap(characters => {
      // 为每个角色创建包含嵌套请求的Observable
      const characterObservables = characters.map(character => {
        // 并行请求homeworld和所有films资源
        return forkJoin({
          homeworld: this.getSingleResource(character.homeworld),
          films: forkJoin(character.films.map(filmUrl => this.getSingleResource(filmUrl)))
        }).pipe(
          // 将嵌套请求的结果合并到原角色对象中，替换原来的URL字段
          map(nestedData => ({ ...character, ...nestedData }))
        );
      });

      // 等待所有角色的嵌套请求都完成后，返回完整的角色数组
      return forkJoin(characterObservables);
    })
  );
}

// 保留你原有的基础请求方法，负责获取初始角色列表
getData(page?: string): Observable<any[]> {
  const baseUrl = 'https://swapi.dev/api/people/';
  const requestUrl = page ? `${baseUrl}?page=${page}` : baseUrl;
  
  return this.http.get<any>(requestUrl).pipe(
    // SWAPI的列表数据存在results字段中，需要提取出来
    map(response => response.results)
  );
}

3. 关键操作符说明 #

• mergeMap：将初始角色列表的Observable流，转换为每个角色的嵌套请求流，实现分步处理数据。
• forkJoin：用于并行处理多个Observable请求，只有当所有请求都成功返回时才会输出结果，非常适合批量处理嵌套URL。
• map：把嵌套请求返回的实际数据，合并到原角色对象里，替换掉原来的URL字段。

4. 组件中调用示例 #

this.swapiService.getCharactersWithNestedData('1').subscribe(characters => {
  console.log('包含完整嵌套数据的角色列表:', characters);
  // 此时每个角色的homeworld是星球详情对象，films是电影详情数组
});

额外注意点 #

• 如果嵌套URL数量过多，SWAPI可能会触发请求频率限制，这时可以考虑给请求添加delay，或者用concatMap替代部分forkJoin实现串行请求（不过串行会降低请求速度）。
• 其他嵌套字段比如species、starships的处理逻辑和films完全一致，只需要替换对应的字段名即可。

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