rxjs forkJoin 在另一个 observable 中嵌套嵌套的 observable

Question

有两组可观察的（网络请求）。 在第一个 observable 解决后，我需要forkJoin多个 observable。 但作为回报，我得到的是Subscriber而不是数据。

请检查第三小提琴https://stackblitz.com/edit/zj3mhp?file=index.ts

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

let array = [of({ data: [1] }), of({ data: [2] })];
const init = of({ pages: 2 });

function gerData() {
  const observable = forkJoin(array);
  return init.pipe(
    map(data => {
      return observable.subscribe(data => {
        const arr = [];
        data.forEach(x => {
          arr.push(...x.data);
        });
        console.log('array', arr);
        return arr;
      });
    })
  );
}



gerData().subscribe((data) => {
  console.log('final data: ', data);
})

Answer 1

您可以使用mergeMap()而不是 map()，返回订阅无济于事。

我们在map()中返回的任何内容都将是订阅成功回调中收到的值。 我们无法从订阅对象中检索值。

在mergeMap我们返回一个 Observable，它将与父 observable 合并，我们可以使用单个订阅获取合并的 observable 的值。

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

let array = [of({ data: [1] }), of({ data: [2] })];
const init = of({ pages: 2 });

function gerData() {
  const observable = forkJoin(array);
  return init.pipe(
    mergeMap(data => {
      return observable.pipe(map(data => {
        const arr = [];
        data.forEach(x => {
          arr.push(...x.data);
        });
        console.log('array', arr);
        return arr;
      }));
    })
  );
}



gerData().subscribe((data) => {
  console.log('final data: ', data);
})

https://stackblitz.com/edit/zj3mhp-elrkur?file=index.ts

Answer 2

你可以做类似的事情

function gerData() {
  const observable = forkJoin(array);
  return init.pipe(
    switchMap(() => observable),
    map(res => res.reduce((prev, next) => prev.concat(next.data), []))
  );
}

gerData().subscribe(data => {
  console.log("final data: ", data);
});

Answer 3

一旦您订阅了一个observable它就会开始执行并变成一个subscription ，您应该返回observable并使用switchMap来运行该 observable。 请尝试以下操作：

function gerData() {
  return init.pipe(switchMap(data=>
    forkJoin(array).pipe(map(arr=>arr.map(item=>item.data)))
  ));
}