Angular中如何在服务与组件间正确返回并接收Observable转换后的数据？

嘿，我明白你的需求：在HTTP请求拿到数据后，遍历转换每一项，得等所有转换都做完再把数据传给组件是吧？分两种常见情况给你说清楚：

第一种：同步转换（不用额外异步请求） #

如果你的转换只是改改字段名、格式化日期这种同步操作，那直接在map里处理就完事了——map本身就是同步处理数据流的，会等所有元素转换完再把新数组发出去。

不过看你现有代码里map(data => this.listExtract(response, params))有个小bug：箭头函数参数是data，但你用了response，得改成data才行。调整后的代码大概是这样：

listApi(params: any): Observable<any[]> {
  return this.http.get(params.url, ampOptions)
    .map((response: any) => {
      // 先把原始数组取出来，这里假设响应里的列表是response.data.list，你按实际结构改
      const rawList = response.data.list;
      // 用数组的map遍历每一项，同步转换
      const transformedList = rawList.map((item: any) => {
        // 这里写你的转换逻辑，比如把名字转大写、格式化时间
        return {
          id: item.id,
          displayName: item.name.toUpperCase(),
          createDate: new Date(item.createTime).toLocaleDateString()
        };
      });
      // 如果原来的listExtract是做统一提取，把上面的逻辑整合进去就行
      return transformedList;
    })
    .catch(this.handleError);
}

这样组件订阅时拿到的就是已经全部转换好的数组，不用额外等。

第二种：异步转换（每一项要调额外接口） #

要是你的转换得依赖异步操作——比如每一条数据都要再调个接口拿额外信息，那光用map就不行了，它没法等异步操作完成。这时候得靠RxJS的forkJoin和concatMap组合来搞：

// 记得先导入需要的操作符
import { forkJoin } from 'rxjs/observable/forkJoin';
import { concatMap } from 'rxjs/operators';

listApi(params: any): Observable<any[]> {
  return this.http.get(params.url, ampOptions)
    .concatMap((response: any) => {
      const rawList = response.data.list;
      // 把每一项的异步转换变成Observable数组
      const transformTasks = rawList.map((item: any) => {
        // 这里是你的异步操作，比如调用另一个服务拿额外数据
        return this.extraDataService.getDetail(item.id)
          .map(extraInfo => {
            // 合并原始数据和新拿到的信息，完成转换
            return {
              ...item,
              extraDetails: extraInfo,
              calculatedTotal: item.amount + extraInfo.bonus
            };
          });
      });
      // forkJoin会等所有异步任务都完成，再把转换后的数组一起返回
      return forkJoin(transformTasks);
    })
    .catch(this.handleError);
}

小提示：操作符怎么选？ #

• concatMap：按顺序处理每一项，等上一个异步操作完了再搞下一个，适合需要保持原始顺序的场景。
• 如果是实时搜索这种需要取消旧请求的场景，才用switchMap，这里大概率用不上。
• forkJoin：必须所有传入的Observable都完成才会返回结果，完美符合你“所有转换完成后再返回”的要求。

组件那边不用额外操作 #

组件订阅的时候直接拿数据就行，服务里的Observable已经帮你把所有转换都等完了：

this.yourService.listApi(yourParams).subscribe(
  processedData => {
    // 这里拿到的就是全部转换好的数组
    this.itemList = processedData;
  },
  err => {
    // 处理错误逻辑
  }
);

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