sur ngOnInit, je fais 4 requêtes http pour les données, après cela je dois charger les données du serveur pour remplir les formulaires avec les données basées sur le modèle de données des 4 derniers appels http.
En bref, je dois m'abonner à ces 4 appels http, et assurez-vous de ne pas échouer s'ils n'échouent pas enfin je peux appeler le 5ème appel http pour obtenir des données du serveur.
D'après ce que je comprends, je devrais éviter de un observable et aller avec le commutateur, mais comment faire cela avec 4 appel http? dois-je créer une attente observable pour les appels http et en cas de succès, utiliser switchmap lors du 5ème appel http?
Voici le code.
ngOnInit() {
this.service.getProvince().subscribe(
(value) => { return value; },
(error: AppError) => {
if (error instanceof NotFoundError) {
console.log('Error richiesta http');
} else {
console.log(error);
}
});
this.service.getLingueStraniere().subscribe(
(value) => { return value; },
(error: AppError) => {
if (error instanceof NotFoundError) {
console.log('Error richiesta http');
} else {
console.log(error);
}
});
this.service.getTitoliPreferenziali().subscribe(
(value) => { return value; },
(error: AppError) => {
if (error instanceof NotFoundError) {
console.log('Error richiesta http');
} else {
console.log(error);
}
});
this.service.getRiserve().subscribe(
(value) => { return value; },
(error: AppError) => {
if (error instanceof NotFoundError) {
console.log('Error richiesta http');
} else {
console.log(error);
}
});
}
// this is the 5th call that need to be done only if last 4 call not fail
finalCall {
this.service.getDomanda().subscribe((domanda: any) => {
this.popolaForm(domanda); // Method that use data to fill foms
},
(error: AppError) => {
if (error instanceof NotFoundError) {
console.log('Error richiesta http');
} else {
console.log(error);
}
});
}
3 Réponses :
Vous pouvez utiliser forkJoin . Il attend que toutes les observables soient terminées, avant d'émettre la dernière valeur émise de chaque requête. forkJoin renvoie une erreur si l'une des observables renvoie une erreur.
let callOne = this.service.getLingueStraniere();
let callTwo = this.service.getTitoliPreferenziali();
.
.
.
forkJoin([callOne, callTwo]).subscribe(response => {
//handle success response
}, (error) => {
// error handling
}, () => {
// when observable is completed
});
Vous pouvez en savoir plus sur forkJoin sur ici .
Vous pouvez utiliser forkJoin pour combiner toutes les requêtes et obtenir les résultats sous forme de rappel lorsque toutes les requêtes sont terminées.
import { forkJoin } from 'rxjs';
import { switchMap } from 'rxjs/operators';
ngOnInit() {
forkJoin([this.service.getProvince(),this.service.getLingueStraniere(),this.service.getTitoliPreferenziali(), this.service.getRiserve()])
.pipe(switchMap(result => {
console.log('Province', result[0]);
console.log('LingueStraniere', result[1]);
console.log('TitoliPreferenziali', result[2]);
console.log('Riserve', result[3]);
return this.service.getDomanda();
}))
.subscribe((domanda: any) => {
console.log('getDomanda', domanda);
});
}
Toutes les réponses étaient bonnes, mais je pense que vous êtes le moyen le plus propre et le meilleur RXJS. Merci !
Je transformerais ces abonnements en promesses en utilisant .toPromise () afin que vous puissiez attendre que les 4 requêtes http soient terminées, puis remplir le formulaire. Ce n’est pas un exemple complet, mais l’idée est dite.
try {
... await this.service.getProvince().toPromise();
... await this.service.getTitoliPreferenziali().toPromise();
... await this.service.getLingueStraniere().toPromise();
... await this.service.getRiserve().toPromise();
//fill form
}catch(error) {
//show error message or do something like retry calls
}
Vous pouvez utiliser forkJoin pour fusionner vos demandes.