1
votes

Arrêter d'appeler une API sur chaque ngOnInit ()

Je travaille sur un front-end angulaire pour une application Web. Il existe plusieurs explorations de sous-page (différents composants angulaires) qui effectuent tous le même appel API dans la méthode ngOnInit (). Ce nombre constant d'appels provoque un ralentissement lorsque nous commençons à obtenir un niveau élevé d'utilisateurs utilisant l'application. Je cherche un moyen de sauvegarder ces données afin que je puisse les appeler sur les pages de cette façon le nombre d'appels d'API est réduit.

ngOnInit() {
    if (this.api.validInputParams()) {
        this.api.getLiveData().subscribe((response) => {
            //do page specific function and filtering

        }, (error) => {
            // Any error should be caught in the HttpInterceptor
        });
    }
}

typescript angular

2 commentaires

ça dépend ... est-ce que ces données DOIVENT être mises à jour? lorsque? Comment?

Je ne sais pas exactement si j'ai bien compris la question. Peut-être qu'une option consiste à enregistrer les données dans le stockage de session et à les lire à partir de là? Ou si ses composants enfants, vous pouvez utiliser Input / Output pour transmettre les données. Peut-être utiliser rxjs Subject pour transmettre les données aux composants du même niveau etc ...

4 Réponses :

0
votes

Le moyen le plus simple est de les transmettre avec 2-Way-DataBinding Si ce n'est pas possible, la solution la plus simple serait de l'enregistrer dans localStorage avec localStorage.setItem ('data', JSON.stringify (yourData); et pour le lire, vous pouvez utiliser yourData = JSON.parse (localStorage.getItem ('data'));

0 commentaires

0
votes

S'il n'a pas besoin d'être mis à jour, enregistrez-le simplement dans votre service et au lieu de faire l'appel http, renvoyez ce qui est déjà enregistré. S'il doit être mis à jour, vous pouvez également enregistrer la dernière mise à jour et si la différence est trop importante, vous passez l'appel.

0 commentaires

2
votes

Vous ne pouvez appeler l'API qu'une seule fois dans le composant de niveau supérieur et communiquer avec les sous-pages avec @Input (), liaison de données unidirectionnelle. Dans le composant de niveau supérieur:

top-component.ts (appelez l'API et enregistrez-le dans une variable)

@Input() response;

top-component.html (envoyez-le au sous-page)

<app-children [response]="response"></app-children>

sous-page (référence à la réponse)

public response;

ngOnInit() {
  this.api.getData().subscribe(response => this.response = response);

0 commentaires

0
votes

Consultez la documentation pour les options d'interaction des composants: https://angular.io/guide/component-interaction < / a> Je préfère pour moi utiliser le service dans des cas comme le vôtre ( https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service )

Vous pouvez avoir BehaviorSubject dans votre service et vous pouvez vous y abonner dans vos composants.

0 commentaires