RXJS订阅中值发射顺序异常（新值先于旧值）求助

你遇到的情况是：在BehaviorSubject的订阅回调中同步调用next更新值，导致当前订阅先收到新值，再收到原本的旧值。

问题原因 #

BehaviorSubject的特性是订阅时立即发射当前最新值，且同步调用next会立刻触发所有订阅者的回调。当第二个订阅处理初始值FOO时，tap里的next({name: 'BAR'})会同步执行——此时这个新值会被当前订阅优先处理，等新值的处理完成后，才会回到旧值FOO的后续流程，所以日志里先出现BAR再出现FOO。

解决方案 #

方案1：用异步调度推迟更新操作

在调用next时使用异步调度器（比如asyncScheduler），让当前订阅的旧值处理完成后，再执行新值的发射：

import { BehaviorSubject, asyncScheduler } from 'rxjs';
import { distinctUntilKeyChanged, map, tap } from 'rxjs/operators';

const mysubject = new BehaviorSubject({ name: 'FOO' });

mysubject.pipe(map((res) => `Hello, ${res.name}!`)).subscribe(console.log);

mysubject
  .pipe(
    distinctUntilKeyChanged('name'),
    tap((res) => {
      if (res.name === 'FOO') {
        asyncScheduler.schedule(() => {
          mysubject.next({ name: 'BAR' });
        });
      }
    })
  )
  .subscribe(console.log);

执行后日志顺序：

Hello, FOO!
{name: "FOO"}
Hello, BAR!
{name: "BAR"}

方案2：将更新逻辑整合到流内部

避免在订阅回调中直接修改Subject状态，而是通过操作符将更新逻辑嵌入流中，保证值的处理顺序：

import { BehaviorSubject, of } from 'rxjs';
import { distinctUntilKeyChanged, map, switchMap, tap } from 'rxjs/operators';

const mysubject = new BehaviorSubject({ name: 'FOO' });

mysubject.pipe(map((res) => `Hello, ${res.name}!`)).subscribe(console.log);

mysubject
  .pipe(
    distinctUntilKeyChanged('name'),
    switchMap((res) => {
      if (res.name === 'FOO') {
        // 先输出旧值，再输出新值
        return of(res, { name: 'BAR' });
      }
      return of(res);
    }),
    tap((res) => {
      // 仅在需要时更新Subject的当前值
      if (res.name === 'BAR') {
        mysubject.next(res);
      }
    })
  )
  .subscribe(console.log);

这种方式更符合RxJS的流处理理念，避免了同步嵌套更新带来的顺序问题。

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