Javascript 如何在angular中停止重复的api调用

我在点击路由器链接时有一个非常简单的API调用。当部长页面打开时，它会显示一些数据。但我看到每当我从主页或任何其他页面返回该页面时，API都会再次加载

公使 apiredservice.ts

---

最简单的方法是，如果您只希望加载一次数据，则如下所示：

import { shareReplay } from 'rxjs/operators';

export class ApiReadService {
   constructor(private http: HttpClient) { }

   ministers$ = this.http.get('http://localhost:8081/allMinisters')
                         .pipe(shareReplay(1))

   getData() {
      return this.ministers$;
   }
} 

---

一旦返回结果，它将被

shareReplay（1）

缓存，并且每次返回相同的值。

第一个选项和第二个实际调用可以有2个，请清除控制台，然后路由到该页面，并检查有多少请求正在进行。一次只能有1个。每次我回到该页面时，api都会加载。每次创建组件时，都会调用

ngonit

。。。这是每次你查看页面的时候。当您在

ngOnInit

中调用

this.apiRead.getData

时，您需要一种缓存数据的方法，Simon_Weaver在下面展示了这种方法。。。虽然有很多方法可以缓存客户端的数据，但您可以非常高效地使用它——如果您是Angular的新手，我强烈建议您尽可能多地阅读RxJS。尽量找到与Angular相关的文章，因为它们会更有用——或者只是一些问题。理解RxJS确实有助于充分利用Angular的潜力，这是其他任何东西都无法比拟的。谢谢你的提示。将开始角度教程。另外，如果我需要从shareReplay导入一些内容，您是否介意告诉我（1）谢谢您更新的答案解决我的问题。但是如果我在这段时间内更新了api，它会显示更新的答案吗？你的意思是如果你增加了一个新的部长-不会。你需要决定什么时候刷新它，而它本身可能会变得异常复杂。但如果你只想加载一次，这就行了。这不是强制性的，它只是一个命名观察对象的约定

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/Http';

@Injectable({
  providedIn: 'root'
})

export class ApiReadService {
    constructor(private http: HttpClient) { }

    getData(){
        return this.http.get('http://localhost:8081/allMinisters')
    }
}

import { shareReplay } from 'rxjs/operators';

export class ApiReadService {
   constructor(private http: HttpClient) { }

   ministers$ = this.http.get('http://localhost:8081/allMinisters')
                         .pipe(shareReplay(1))

   getData() {
      return this.ministers$;
   }
}