Requêtes HTTP infinies au back-end lors de l'abonnement à un observable

Question

J'ajoute une fonctionnalité à un site Angular2 pour afficher le nom de l'utilisateur actuellement connecté.

Je semble être en mesure de récupérer les informations dont j'ai besoin du service principal. Toutefois, lorsque le code frontal en question est en cours d'exécution, les demandes à l'arrière-plan sont envoyées à plusieurs reprises et aussi rapidement que possible lorsqu'une seule demande est nécessaire.

Cette boucle infinie de requêtes a commencé lorsque j'ai changé le code pour m'abonner à un observable. Sans m'abonner, les informations que j'ai pu récupérer du service frontal n'étaient pas utilisables; cela ressemblait à l'exemple ci-dessous.

{"_isScalar":false,"source":{"_isScalar":false},"operator":{}} 

Component

loggedInUser() { 
    this.authService.loggedInUser().subscribe(res => { 
     this.currentUser = res; 
     return this.currentUser; 
    }) 
} 

service frontal

loggedInUser() { 
    const userId = localStorage.getItem('userId'); 
    return this.http 
     .get('http://localhost:3000/user/current/' + userId) 
     .map((response: Response) => { 
    const user = response.json(); 
    return user; 
}) 

J'ai appris que ce n'est pas vraiment une "boucle infinie" à la lecture d'autres messages sur Stack Overflow . Cependant, je n'ai pas été capable de comprendre les solutions dans ces autres postes.

Nous vous remercions de votre aide!

Answer 1

Vous ne savez pas sans un violon mais appelez-vous directement la fonction loggedInUser du composant à partir du modèle?

Dans le composant, déplacer le s'abonner code au ngOnInit crochet

include { Component, OnInit } from '@angular/core'; 
... 
class AppComponent implements Oninit { 

    ngOnInit() { 
    this.authService.loggedInUser().subscribe(res => { 
     this.currentUser = res; 
    }); 
    } 
} 

Se reporter à this.currentUser dans le modèle

<div>Logged in as: {{currentUser}}</div> 

meilleur aussi unsubscribe dans NgOnDestroy.

Answer 2

Simple consiste à stocker vos informations dans votre localStorage lorsque l'utilisateur s'est connecté et après simplement le lire.

//In your authService 
loggedInUser() { 
    return this.http.post(AppSettings.API_URL + 'login', data, this.options) 
    .map((response: Response) => { 
     let username = response.json().data.username; 
     if(username){ 
      localStorage.setItem('username', username); 
      return true; 
     } else { 
      return false; 
     } 
    } 

//In your login form component 
onSubmit() { 
    this.authService.loggedInUser(email, ....) 
     .subscribe(
      result => { 
       if (result === true) { 
        //It's ok 
       } 
      error => { 
       //error 
      } 
     ) 
} 

Si vous souhaitez vous abonner une seule fois, vous pouvez utiliser l'opérateur de prise. N'oubliez pas de vous désabonner de votre observable lorsque vous quittez un composant ou naviguez vers un autre (faites-le dans vos méthodes ngOnDestroy).

Answer 3

Vous pouvez utiliser la fonction .retry, afin d'envoyer une requête uniquement pour un nombre limité de fois.

Vous pouvez écrire quelque chose comme ceci:

loggedInUser() { 

    const userId = localStorage.getItem('userId'); 

    return this.http 

     .get('http://localhost:3000/user/current/' + userId) 

     .retry(1) 

     .map((response: Response) => { 

    const user = response.json(); 

    return user; 

}) 

pour ce code, si la requête échoue pour la première fois, il va essayer de nouveau une seule fois.

pour référence, vous pouvez voir ici - http://reactivex.io/documentation/operators/retry.html