可以使用shareReplay操作符解决该问题,该操作符会共享Observable的输出,并将其缓存,以便进行多次订阅时,不会重新发出请求。
代码示例:
import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs'; import { shareReplay } from 'rxjs/operators';
@Component({ selector: 'app-my-component', templateUrl: './my-component.component.html', styleUrls: ['./my-component.component.css'] }) export class MyComponentComponent implements OnInit {
private posts$: Observable
constructor(private http: HttpClient) { }
ngOnInit() { this.posts$ = this.http.get('https://jsonplaceholder.typicode.com/posts') .pipe(shareReplay()); }
getPosts() { this.posts$.subscribe((data) => { console.log(data); }); }
}
在上面的示例中,我们定义了私有的posts$可观察对象,并在ngOnInit()函数中,使用shareReplay操作符处理了http请求。在getPosts()函数中,我们使用了posts$对象来订阅响应并获取数据。由于我们使用了shareReplay操作符,第一次响应将被缓存,并在以后的订阅中重新使用,而不会发出新的HTTP请求。