如何防止 RxJS 中的多次 fetch 调用？答案

【问题标题】：How to prevent multiple fetch calling in RxJS?如何防止 RxJS 中的多次 fetch 调用？
【发布时间】：2021-10-13 22:17:13
【问题描述】：

我有以下代码：

const fetchBook = (bookId: number) => {
    const title = 'Book' + bookId;
    console.log('fetch book:', title)
    // mimic http request
    return timer(200).pipe(mapTo({ bookId, title }));
}

const bookId$ = new Subject<number>();

const book$ = bookId$.pipe(
    mergeMap(bookId => fetchBook(bookId))
);

book$.subscribe(book => console.log('subscriber1: ', book.title))
book$.subscribe(book => console.log('subscriber2: ', book.title))

bookId$.next(1);

控制台输出：

fetch book: Book1
fetch book: Book1 <--- called second time
subscriber1:  Book1
subscriber2:  Book1

在 RxJS 中防止多次获取的最佳做法是什么？

更新：我不使用 Angular

Upd2：问题是由多个订阅者引起的

【问题讨论】：

标签： rxjs rxjs6 rxjs-observables

【解决方案1】：

在您的mergeMap() 之后添加shareReplay(1)。这将确保迟到的订阅者会从源 observable 获得最后发出的值。

【讨论】：