RxJS问题：首次调用.next()时Observable未发射值

先把你没写完的代码补全成符合描述的合理版本，方便咱们分析问题：

import { Observable, concat, forkJoin, fromEvent } from 'rxjs';
import { map, take } from 'rxjs/operators';

const somethingHappened = true;
// 按你的描述：点击文档发射值后立即完成
const first$ = Observable.create(observer => {
  document.addEventListener('click', e => {
    observer.next(e);
    observer.complete();
  });
});

const second$ = first$.pipe(
  map(e => `处理后的点击坐标: ${e.clientX}, ${e.clientY}`)
);

// 假设你原本的third$是尝试拼接两者的输出
// const third$ = concat(first$, second$);

最可能遇到的问题：concat拼接后只输出first$的值 #

如果你的third$用了concat(first$, second$)，问题根源很清晰：

• concat的逻辑是先订阅第一个Observable，等它完全完成后，再订阅第二个Observable
• 当你点击文档时，first$发射值并立即complete，此时concat会去订阅second$，但second$依赖的first$已经完成，不会再发射任何值，所以second$自然没有输出

对应解决方案 #

如果你的需求是同时获取原始点击事件和映射后的值，根本不需要拆分三个Observable，直接在同一个流里处理更简洁：

const third$ = first$.pipe(
  map(e => ({
    originalEvent: e,
    processedValue: `处理后的点击坐标: ${e.clientX}, ${e.clientY}`
  }))
);

// 订阅测试
third$.subscribe(result => {
  console.log('原始事件:', result.originalEvent);
  console.log('处理后的值:', result.processedValue);
});

如果需求是明确合并两者的最后值 #

如果你的目标是拿到first$的最后值（这里就是唯一的一次发射值）和second$的输出合并，用forkJoin最适配你的场景：

const third$ = forkJoin([first$, second$]);

third$.subscribe(([originalEvent, processedValue]) => {
  console.log('拼接结果:', { originalEvent, processedValue });
});

• forkJoin会等待所有传入的Observable都完成后，把它们的最后一个值以数组形式发射，刚好匹配你的设计：first$和second$都是点击后发射一次就完成，所以能完美拿到两者的值

额外优化建议：用fromEvent替代手动创建Observable #

你手动用Observable.create绑定事件的写法不够优雅，RxJS提供的fromEvent可以帮你自动处理订阅管理，再配合take(1)实现“发射单个值并立即完成”的需求，代码更简洁可靠：

// 推荐写法
const first$ = fromEvent(document, 'click').pipe(
  take(1) // 只取第一次点击，之后自动complete
);

内容的提问来源于stack exchange，提问作者feerlay