RXJS：将来自 foreach 的多个调用组合成一个 observable

Question

一段时间以来，我一直在尝试组合多个异步调用，每次接近时，我都会陷入我试图解决的 foreach 循环中。

目前，我将一个类别数组传递给一个函数，该函数将返回一个包含所有问题（所有类别组合）的数组的 observable。
我在想

  getQuestions(categories: Category[]): Observable<Question[]> {
    let q: Question[];
    categories.forEach(c => {
      this.cs
        .getQuestionsCategory(c.id)
        .pipe(map(questions => q.push(...questions)));
         //return q somehow?
    });
  }

然后我就可以像这样使用它了：

   let result: Result;
    let res: [Category[], Account, Answer[]];

    return this.getResultByRouteParamId(route).pipe(
      tap(resu => (result = resu)),
      switchMap((result: Result) =>
        this.forkJoinQuizCategoriesAccountAnswers(result)
      ),
      tap(results => (res = results)),
      switchMap(x => this.getQuestions(res[0])),
      map(questions => {
        // Create objects of questions, answers and category and add them to a QuestionAnswer object
        // Return new UserResult containing the user and a list of QuestionAnswer objects
        return new UserResult(null, null);
      })
    );

这与我在my previous question 上的推荐非常接近。我想将此添加到我原来的问题中，但我觉得这不是正确的做法，因为我不再为嵌套的可观察对象而苦苦挣扎，而是在循环它们。

编辑
尝试了其他方法，但我怀疑这是正确的方法

  getQuestions(categories: Category[]): Observable<Question[]> {
    let ques = categories.map(c =>
      this.cs.getQuestionsCategory(this.auth.token, c.id)
    );

    return merge(...ques);
  }

Answer 1

首先，我喜欢把它放到一个专用函数中的想法，这样你就可以将接口与实现分开。

你要解决的问题应该在管道中是可行的，这只是一个弄清楚发生了什么的案例。

• 您从Category 的数组开始。
• 对于每个类别，您都想调用一个服务函数，该函数返回一个可观察的Question 数组。
• 您希望从函数中异步返回扁平化的问题数组

我会通过以下方式解决这个问题：

• 创建可观察数组。这有助于您了解您的起点
• forkJoin 可观察数组。这本身将返回一个二维数组
• map二维数组转平面数组

getQuestions(categories: Category[]): Observable<Question[]> {
  // firstly, start out with an array of observable arrays
  const observables: Observable<Question[]>[] = categories.map(cat => 
    this.cs.getQuestionsCategory(cat.id));

  // run all observables in parallel with forkJoin
  return forkJoin(
    observables
  ).pipe(
    // now map the array of arrays to a flattened array
    map(questions => this.flat(questions))
  );
}

// alternative to arr.flat()
private flat<T>(arr: T[][]): T[] {
  return arr.reduce((acc, val) => acc.concat(val), []);
}

Answer 2

您应该将这些流与forkJoin 或combineLatest 结合起来：

getQuestions(categories: Category[]): Observable<Question[]> {
    return forkJoin(
        categories.map(category => this.cd.getQuestionsCategory(category.id))
    ).pipe(tap(questions => { console.log(questions) }));  // Here you can change the data structure of questions instead of just logging them
}