如何将返回Promise的懒加载函数附加到RxJS管道？

你遇到的情况：想把返回Promise的lazyFn加到Subject管道里，但要求只有管道触发时才调用它。之前用withLatestFrom(lazyFn())会直接提前执行lazyFn；试了concatMap和switchMap，却只能拿到lazyFn的返回值，还不想写嵌套的复杂管道。目标是管道触发时，tap里能拿到两个值组成的数组：x = [{lazy: true}, { mywork: true }]。

修正后的代码 #

import { Subject, from } from 'rxjs';
import { switchMap, map, tap } from 'rxjs/operators';

const lazyFn = () => Promise.resolve({ lazy: true });

const subject = new Subject();

const work = subject.pipe(
  // 每次subject发值时才调用lazyFn，把原值和Promise结果拼成数组
  switchMap(val => from(lazyFn()).pipe(map(lazyVal => [lazyVal, val]))),
  tap((x) => {
    console.log({ x }); // 输出符合预期的数组
  })
);

work.subscribe();

subject.next({ mywork: true });

关键说明 #

• switchMap会在Subject每次发射新值时执行内部逻辑，保证lazyFn只在管道触发时才调用，不会提前执行。
• from(lazyFn())把Promise转成Observable，再用map把原管道的值和lazyFn的返回值组合成数组，不用嵌套复杂的管道结构。
• 如果需要保留未完成的请求，把switchMap换成concatMap；如果允许同时处理多个请求，用mergeMap即可。

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