0
votes

Angular7 + rxjs multiples abonnés à la même mesure observable

Cela pourrait être une question noob, mais je pouvais trouver une référence sur elle.

J'ai deux composants placés à différents endroits, chaque composant utilise un service pour interroger un point d'extrémité et obtenir des données (par exemple, un profil d'utilisateur). p>

Le service renvoie un observable, j'ai besoin que l'observable soit unique ou au moins pour faire une demande unique. P>

getData(): Observable<DataModel> {
    if (!this._observable) {
        this._observable = this._http.get<DataResponse>('/some-route').pipe(
          map((response: DataResponse) => this.handleResponse(response)),
          // HERE IS THE TRICK
          publishLast(),
          refCount()
        )
    }

    return this_observable;
}

angular rxjs rxjs6 angular7

1 commentaires

Si vous êtes noob - jetez un coup d'œil à mon parcours vidéo pour les débutants RXJS: packpbub.com/web-development/hands-rxjs-web-development-vide o

4 Réponses :

0
votes

Vous pouvez facilement regrouper vos demandes dans une seule observable qui résoudra à l'achèvement de toutes vos demandes à l'aide de Forkjoin code> Opérateur

Voici un exemple P>

  public requestDataFromMultipleSources(): Observable<any[]> {
    let response1 = this.http.get(requestUrl1);
    let response2 = this.http.get(requestUrl2);
    let response3 = this.http.get(requestUrl3);
    // Observable.forkJoin (RxJS 5) changes to just forkJoin() in RxJS 6
    return forkJoin([response1, response2, response3]);
  }

3 commentaires

Merci à Taha-Zgued, mais n'est pas ce dont je parle. L'URL est la même, de multiples composants peuvent souscrire à la même observabilité, le problème est au cours de la demande de fonctionner toujours un autre élément vous abonnez-vous et une nouvelle demande de demande. Je veux éviter de faire une deuxième demande, mais de garder la même chose observable.

Oh pardon. Eh bien c'est encore plus facile. Ce service Vous pouvez stocker votre réponse dans une variable à l'intérieur du service et utiliser cette variable dans vos composants.

Fateh Mohamed a fait un très bon exemple de ce dont je parle

1
votes

Regardez à ma bibliothèque NGX-RxCache. Il simplifie la gestion de l'état.

https://github.com/adriandavidbrand/ngx-rxcache < / a> xxx

alors vous pouvez accéder aux données sur le service avec xxx

https://medium.com/@adrianbrand/angular-state-management-vith-rxcache-468A865FC3FB

0 commentaires

0
votes

Vous pouvez utiliser ShareRayplay fort> à la place, qui rejouera l'événement de la source observable à tous les abonnés et assurez-vous de partager le dernier résultat uniquement

getData(): Observable<DataModel> {
    return this._http.get<DataResponse>('/some-route').pipe(
      map((response: DataResponse) => this.handleResponse(response)),
      shareReplay(1) 
    );
}

0 commentaires

2
votes

J'ai trouvé le modèle suivant pour être efficace pour le faire:

@Injectable()
export class SomeService {
  myDataObservable$: Observable<DataModel>;

  constructor( ) {
    this.myDataObservable$ = this.getData().pipe(shareReplay());
  }

  getData(): Observable<DataModel> {
    return this._http.get<DataResponse>('/some-route').pipe(
      map((response: DataResponse) => this.handleResponse(response))
    );
  }
}

3 commentaires

Comment vous abonnez-vous au service. Quelle fonction exposez-vous du service?

@LuxxenatorX Vous n'avez besoin que de la propriété "myDataObServable $" à exposer du service. Dès que cet observable est souscrit à, la méthode getdata () fonctionnera.

L'exposez-vous via une fonction GetMyDataAbServable $ () ou directement via Service.MyDataObServable $?