我在angular中有一个从API获取数据的服务,这些数据在许多组件中使用,所以每次调用API来获取相同的数据是一种浪费。
所以我继续尝试使用BehaviorSubjects来存储数据。我在一定程度上很好地使用了它,如下所示:
服务
books = new BehaviorSubject<Book[]>(null);
setBooks(book: Book[]) {
this.books.next(book);
}
getBooks() {
this.http.get(...).do(
(res) => {
this.setBooks(res.books);
}
);
}
组件:
ngOnInit() {
this.booksService.books.subscribe(
(books) => {
// in case the api was never called
if (books == null) {
return this.booksService.getBooks().subscribe();
}
console.log(books);
// ...
}
);
}
当有书时,它工作得很好,但如果书是一个空数组(这是预期的行为之一),程序就会陷入循环,永远调用api。测试它时,我发现它在服务调用中的.do()部分卡住了,但我不知道原因。
我读到here BehaviorSubject不是用来处理null初始值的,但就像@estus建议的那样,使用ReplaySubject(1)也会发生同样的事情。
我想知道是否有像这样存储数据的“正确”方法。我也不认为使用本地存储是最好的解决方案,因为它可能是大量的数据,并且在应用程序的使用过程中会发生很大的变化。
发布于 2018-06-10 05:41:49
这样做:
服务
// init books as BehaviorSubject with an empty array of type Book
books = new BehaviorSubject<Book[]>([]);
setBooks(book: Book[]) {
this.books.next(book);
}
// return books as an Observable
getBooks(): Observable<Book[]> {
// only if length of array is 0, load from server
if (this.books.getValue().length === 0) {
this.loadBooks();
}
// return books for subscription even if the array is yet empty.
// It‘ll get filled soon.
return this.books.asObservable();
}
private loadBooks(): void {
this.http.get(...).do(
(res) => {
this.books.next(res.books);
} );
}
TS-文件
ngOnInit() {
this.booksService.getBooks().subscribe(
(books) => {
console.log('books: ', books);
});
}
这里发生的情况是,您将只加载图书列表一次。建立对图书的订阅,一旦图书列表到达,新列表就会传播到所有订阅者。
所以你应该会看到2次控制台日志。第一个有一个空列表,第二个有书。
https://stackoverflow.com/questions/50778540
复制相似问题