3
votes

Comment: renvoyer une requête http lors de l'utilisation du canal asynchrone

Existe-t-il un moyen de renvoyer une HttpRequest lors de l'utilisation du tube asynchrone dans le modèle comme celui-ci?

<div *ngFor='let item of myObservable$ | async'>{{item}}</div>

myObservable$ = this.http.get('api');

angular rxjs

0 commentaires

3 Réponses :

2
votes

Utiliser le tube async est un moyen très pratique de gérer les Observables, car il gère la désinscription pour vous. Cela signifie que si la référence myObservable $ change, ChangeDetection sera déclenché et async désabonnera l'abonnement actuel et s'abonner à un autre. Vous pouvez donc simplement réaffecter la nouvelle valeur myObservable $ et HttpRequest sera à nouveau envoyée.

testez-la vous-même:

< pré> XXX

5 commentaires

Bien qu'une bonne solution de contournement, je pense que cette approche viole le modèle réactif, qui devrait être utilisé lorsque vous travaillez avec un tuyau asynchrone

Pourquoi le pensez-vous? L'OMI est un moyen légitime

Réaffecter l'observable est impératif et non déclaratif. Corrigez-moi si j'ai tort, s'il-vous plait.

@Bogdan B La programmation déclarative signifie que vous exprimez ce que vous aimeriez faire, tout en laissant le comment au langage ou au framework. La programmation impérative signifie que vous lui dites étape par étape comment faire quelque chose. La réaffectation de variables n'a rien à voir avec la programmation déclarative ou impérative. Un excellent exemple de programmation déclarative est le langage SQL

Je ne pense pas que la réaffectation d'une variable en général soit déclarative ou impérative. En réaffectant à un nouvel observable, nous faisons exactement cela. Et le reste de la logique se fait sans notre interférence - async fait le travail pour nous, nous n'avons plus besoin de donner d'autres instructions. Donc, pour cet extrait de code, il semble être encore plus déclaratif

0
votes

Ce n'est pas la meilleure pratique. Le tube async est destiné à être utilisé avec les flux, son utilisation avec des observables de déclenchement tels que les appels http peut avoir des effets secondaires indésirables. Je suggère de mettre l'appel http dans un service et de vous abonner à votre composant. S'il y a une raison spécifique pour laquelle vous souhaitez utiliser le tube asynchrone, je suggère d'avoir un BehaviorSubject séparé et de faire quelque chose comme ça ....

_myBehaviorSubject = new BehaviorSubject(null);
myBehaviorSubject$ = this._myBehaviorSubject.asObservable();

myObservable$ = this.http.get('api').pipe(tap(items => this._myBehaviorSubject.push(items)));

Ensuite, dans votre composant, vous pouvez vous abonner à ceci chaque fois que vous souhaitez effectuer un appel http, et dans votre modèle html, abonnez-vous à myBehaviorSubject $ en utilisant le tube asynchrone.

1 commentaires

La plupart des exemples d'appels http sur les documents Angular sont réalisés à l'aide d'un tube observable et asynchrone. Pourquoi serait-ce une mauvaise pratique si je veux des données fraîches, mais je veux aussi qu'Angular s'occupe de la désinscription et d'avoir une architecture réactive.

3
votes

Vous devez émettre une nouvelle valeur à Observable , si vous avez besoin de récupérer des données par événement spécifique, vous pouvez placer l'événement sur Observable et utiliser switchMap code> pour la récupération du déclencheur:

event$ = new BehaviorSubject(true);

myObservable$ = this.event$.pipe(
  switchMapTo(this.http.get('api'))
);

refetchData() {
  this.event$.next();
}

1 commentaires

Je déplacerais également l'événement $ .next () sur l'événement lui-même dans le modèle. C'est aussi ce que j'avais en tête lorsque j'ai posé la question, et cela me semble être la seule solution efficace à une architecture réactive.