Les appels HTTP sont fabriqués deux fois dans universal angulaire sur la charge initiale, j'ai essayé d'appliquer le transfretstate et également effectué le mécanisme de mise en cache dans mon projet, toujours rien ne se passe.
if (isPlatformBrowser(this.platformId)) {
return this.http.get(baseApi + '/blog/slug/' + blogId);
} else {
const store = this.state.get(MY_DATA, null);
if (store) {
return store;
}
const myData = this.http.get(baseApi + '/blog/slug/' + blogId);
this.state.set(MY_DATA, myData);
return myData;
}
3 Réponses :
Si votre condition est vérifiée, il exécute la requête
const myData = this.http.get(baseApi + '/blog/slug/' + blogId); this.state.set(MY_DATA, myData); return myData;
Mais toujours les appels sont faits deux fois initialement chaque fois que la page frappe le navigateur, dois-je utiliser un fichier intercepteur pour restreindre globalement?
Comme je l'ai dit dans mon commentaire, vous ne pouvez mettre en cache des données avec transfert d'état. De votre code, on dirait que vous essayez de mettre en cache un observable. Et votre premier pour éviter de passer des appels deux fois, vous pouvez utiliser quelque chose comme le code ci-dessous, cela empêchera également de Appelez à effectuer deux fois le côté serveur Vous pouvez également utiliser plus le Transferstatehttpcachemodule , qui fournit un intercepteur générique qui le fait pour toutes vos demandes si est faux, cela signifie que vous ferez toujours le côté du client HTTP Call
J'ai déjà essayé que le Transferstatehttpcachemodule est toujours question de persister. Im obtenir un pépin scintillant.
Transferstatehttpcachemodule ne fonctionne pas
Correction du problème en installant Preboot, pour les personnes qui ont le même problème, vous pouvez suivre ceci:
Nous devons attendre l'application complète du client pour bootstrap et exécuter des événements d'exécution ou tampon à l'aide de Librabriages comme avant Preboot. Ajouter le code ci-dessous sous Imports of app.Module.ts P> {
provide: APP_INITIALIZER,
useFactory: function(document: HTMLDocument, platformId: Object): Function {
return () => {
if (isPlatformBrowser(platformId)) {
const dom = ɵgetDOM();
const styles: any[] = Array.prototype.slice.apply(dom.querySelectorAll(document, `style[ng-transition]`));
styles.forEach(el => {
// Remove ng-transition attribute to prevent Angular appInitializerFactory
// to remove server styles before preboot complete
el.removeAttribute('ng-transition');
});
document.addEventListener('PrebootComplete', () => {
// After preboot complete, remove the server scripts
setTimeout(() => styles.forEach(el => dom.remove(el)));
});
}
};
},
deps: [DOCUMENT, PLATFORM_ID],
multi: true
}
@gautam je n'ai pas pu trouver d'informations qui prévenaient avant d'empêcher les appels http double. Est-ce vraiment?
Je suis désolé pour la réponse tardive, oui, cela fait.
Nope, d'obtenir des appels en double
Vous pouvez uniquement mettre en cache des données avec transfert d'état. On dirait que vous essayez de mettre en cache un observable. Et votre premier si c'est faux, cela signifie que vous ferez toujours le côté du client HTTP Call
Le problème réel est que la SSR angulaire appelle l'API à deux reprises lors de la charge initiale du navigateur et du serveur.here, je dois restreindre les appels de navigateur, de sorte que mes recherches récentes, j'ai découvert que nous avons découvert que nous pouvons limiter les appels de navigateur. Mais rien ne fonctionne et Toujours l'appel est fait deux fois. Il y a une solution pour cela comme un problème est toujours ouvert à GitHub?
Fournir des données sur les appels de réseaux apportés. Utilisez votre navigateur Dev-outils, allez dans l'onglet Networks, créez une capture d'écran des appels. Ajoutez la capture d'écran à la question.
Dans mon réseau, je peux voir un appel d'API supplémentaire qui est fait.SO ici un appel API est effectué par serveur et l'autre client, Capture d'écran des appels réseau ci-joints.