javascript - RxJS:将对象键映射到可观察值

Question

我有一个应用程序，可以向用户显示问题。问题草稿是从 SharePoint 列表加载的。每个草稿都包含一个键，用于从另一个 SharePoint 列表加载对问题的正确回答。以下是我目前的实现方式:

interface QuestionDraft {
  title: string;
  responseKey: string;
}

interface Question {
  title: string;
  responses: string[];
}

const drafts: QuestionDraft[] = [];
const questions: Question[] = [];

// stub
private getDrafts(): Observable<QuestionDraft> {
    return from(drafts);
}

// stub
private getResponses(key: string): Observable<string> {
    return of(key, key, key);
}

main(): void {
    getDrafts().subscribe(
      data => {
        const res: string[] = [];
        getResponses(data.responseKey).subscribe(
          d => res.push(d),
          error => console.error(error),
          () => questions.push({
            title: data.title,
            responses: res
          })
        );
      }, error => console.error(error),
      () => console.log(questions)
    );
}

这个解决方案工作正常，但我认为 main() 中的代码看起来很困惑。有没有更简单的方法来做同样的事情，例如使用 mergeMap 或类似的东西？

Answer 1

您可以使用 mergeMap 映射到新的 Observable，并使用 toArray 收集数组中发出的值。使用 catchError 处理流中的错误并映射到错误的替代 Observable。

此代码将像您的代码一样工作，发出的问题数组包含 getDrafts 抛出错误之前的所有问题，并排除 getResponses 抛出错误的问题。

getDrafts().pipe(
    mergeMap(draft => getResponses(draft.responseKey).pipe(
        toArray(),
        map(responses => ({ title: draft.title, responses } as Question)),
        catchError(error => { console.error(error); return EMPTY; })
    )),
    catchError(error => { console.error(error); return EMPTY; }),
    toArray()
).subscribe(qs => { console.log(qs); questions = qs; })

请记住，最终数组中的问题不一定与传入的草稿的顺序相同。顺序取决于问题的速度>getResponses Observable 完成特定草稿。 (这与您当前的代码行为相同)

为了确保问题与草稿的顺序相同，您可以使用concatMap而不是mergeMap.但这可能会减慢任务的整体执行速度，因为只有在上一个草稿的响应完成后才会获取下一个草稿的响应。