forkJoin 结果与源中的地图

Question

我正在尝试使用 forkJoin 一起获取多个可观察对象（实际代码中的 http 请求）的结果。

其中一个源 observable（下面的 mainObs）应用了 map 运算符，以便输出具有与其他 observable 相同的格式。

我的问题是，在 forkJoin 订阅中，第一个结果是一个 observable，而不是第一个 observable 的输出。

这是一个示例代码，带有 stackblitz demo.

我是不是漏掉了什么？

import { forkJoin, Observable, of } from 'rxjs'; 
import { map } from 'rxjs/operators';

let mainObs = of("main").pipe(map(res => of({success: true, result: res})));

let listOfObservables: Observable<any>[] = [mainObs];

listOfObservables.push(createObs());
listOfObservables.push(createObs());

forkJoin(listOfObservables).subscribe((res: any[]) => {
      console.log(res);
      //Problem: res[0] is an Observable, not a value
      console.log(res[0].success);// <==error
      
    });
    

function createObs()
{
  return of({success: true, result: "dummy"})
}

Answer 1

of 创建一个新的可观察对象。所以你的 mainObs return 一个新的 observable 当它 returns.

您可能想 return 实际结果：

import { forkJoin, Observable, of } from "rxjs";
import { map } from "rxjs/operators";

let mainObs = of("main").pipe(map(res => ({ success: true, result: res })));

// creating a typed array helps preventing this problem early.
let listOfObservables: Observable<{ success: boolean; result: string }>[] = [
  mainObs
];

listOfObservables.push(createObs());
listOfObservables.push(createObs());

forkJoin(listOfObservables).subscribe(
  (res: { success: boolean; result: string }[]) => {
    console.log(res);
    console.log(res[0].success); // <== ok
  }
);

function createObs() {
  return of({ success: true, result: "dummy" });
}

StackBlitz example

Answer 2

1: map

of("main").pipe(
  map(res => of({success: true, result: res}))
);

这会获取字符串“main”，然后将该字符串映射到一个可观察对象。该可观察对象被发出。 observable 的作用在这里并不重要，因为它从未被订阅过。

2: mergeMap

of("main").pipe(
  mergeMap(res => of({success: true, result: res}))
);

这会获取字符串“main”，然后将该字符串映射到一个可观察对象。返回的 observable 被订阅，它的发射被转发。最后，{success: true, result: "main"} 被发出。

3：回到map

of("main").pipe(
  map(res => ({success: true, result: res}))
);

这会获取字符串“main”并将其映射到对象 {success: true, result: "main"}。然后该对象被发射。

#2 和#3 在这些示例中具有相同的最终输出。与大多数任务一样，通常有不止一种方法可以达到相同的结果。 #3 在这种情况下性能最高，因为您避免创建可观察对象并使用 mergeMap 对其进行管理。

forkJoin 结果与源中的地图

forkJoin result with map in source

observable

rxjs

typescript