rxjs - 如何合并外部和内部可观察量答案

【问题标题】：rxjs - how to merge outer and inner observablesrxjs - 如何合并外部和内部可观察量
【发布时间】：2022-12-18 04:17:42
【问题描述】：

我有一个不起作用的代码。目标是在初始化时从 API 获取数据，然后仅从 click 或 keypress 事件获取数据。我不明白如何合并 data$ 的结果，它应该在初始化时出现，然后只从事件中选择结果。

of(res) || merge(event1, event2) <- 不行

const event1 = fromEvent(document, 'click');
const event2 = fromEvent(document, 'keypress');

const data$ = fromFetch('https://api.artic.edu/api/v1/artworks/129884')
  .pipe(
    switchMap((response) => {
      if (response.ok) {
        return response.json();
      } else {
        return of({ error: true, message: `Error ${response.status}` });
      }
    }),
    catchError((err) => {
      console.error(err);
      return of({ error: true, message: err.message });
    }),
  )
  .pipe();

data$
  .pipe(
    switchMap((res) => {
      return (
        of(res) ||
        merge(event1, event2).pipe(
          switchMap((res) => {
            console.log(res);
            return data$;
          }),
        )
      );
    }),
  )
  .subscribe((art) => {
    console.log('Fetched ' + art.data.id);
  });

【问题讨论】：

您想要最初发出数据，然后在任何时候 event1 或 event2 触发？
@BizzyBob，是的。在 init 上获取，然后在 event1 或 event2 触发时获取

标签： javascript rxjs rxjs6

【解决方案1】：

你很接近，但据我所知没有正确使用合并运算符。

我会做这样的事情：


const event1 = fromEvent(document, 'click');
const event2 = fromEvent(document, 'keypress');
const event3 = of(true); // just to trigger on page load

const data$ = fromFetch('https://api.artic.edu/api/v1/artworks/129884')
  .pipe(
    switchMap((response) => {
      if (response.ok) {
        return response.json();
      } else {
        return of({ error: true, message: `Error ${response.status}` });
      }
    }),
    catchError((err) => {
      console.error(err);
      return of({ error: true, message: err.message });
    }),
  );

  const merged = merge(event1, event2, event3);

  merged.pipe(
    switchMap(event => $data)
  ).subscribe();

  event3.pipe(take(1)).subscribe(); // triggers the fetch on load.

【讨论】：