如何防止在 RxJS 中进行多次提取调用？

Question

我有以下代码：

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:问题是由多个订阅者引起的

Answer 1

在 mergeMap() 之后添加 shareReplay(1)。这将确保迟到的订阅者将从源可观察到的最后一个发射值。

如何防止在 RxJS 中进行多次提取调用？

How to prevent multiple fetch calling in RxJS?

rxjs

rxjs6

rxjs-observables