J'ai une page où je montre une liste d'équipes. Il y a un bouton pour enregistrer de nouvelles équipes. Vous cliquez dessus et allez au registre. Là, il fait un message HTTP pour enregistrer l'équipe (avec les données du formulaire), puis revenir à la page avec la liste des équipes. Le problème est que cela remonte avant de terminer le registre du poteau HTTP, le nouveau, n'est pas répertorié ... Avez-vous une idée?
Team.Page.ts P>
async getHeaders() {
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + await this.global.getToken()
})
};
return httpOptions;
}
async get(route: any) {
return await this.http.get(this.global.urlAPI + route, await this.getHeaders());
}
async post(route: any, postData: any) {
console.log('Estoy para postear');
console.log(postData);
this.http.post(this.global.urlAPI + route, postData, await this.getHeaders()).subscribe(arg => {
return arg;
});
}
3 Réponses :
Vous n'étant pas sûr que http code> bibliothèque que vous utilisez pour la création de la requête POST CODE> dans votre service, mais vous pouvez essayer de vous abonner à la réponse, par exemple: async registerTeam(form) {
let birthDate = this.datepipe.transform(form.dateOfBirth, 'yyyy-MM-dd');
let postData = {
"name": form.name,
"description": form.description,
"hat": 0,
"birth": birthDate
}
this.teamsService.registerTeam(postData).subscribe((data) {
this.router.navigate(['/members/teams']);
});
}
J'utilise httpclient . Je ne peux pas utiliser S'abonner Parce qu'il dit que la propriété n'existe pas sur le type 'Promise
the Client HTTP renvoie une observable de get () code> et Post () Code> Demandes qui peuvent être abonnées à. async registerTeam(team) {
const response = await this.api.post('NewTeam', team).toPromise();
return response
}
Cela ne me permet pas de faire comme ça. Dans api.service.ts j'ai modifié post : : async post (itinéraire: tout, postdata: tout) {retour attendre ce.http.post (this.global .urlapi + itinéraire, post-data, attendre cela.Getheaders ()))) TOPROMISE (); } mais je ne sais pas comment souscrire à cela ... ça ne me permet pas, seulement je peux utiliser alors mais ne fonctionne pas ... dans new.page.ts : async registerteam (formulaire) {.....teamsservice.registerteam (post-data) .Chen (((Val => {the.router.navigater (['/ Membres / équipes ']);});}
Pouvez-vous mettre votre code dans un Stackblitz pour aider à déboguer?
J'ai essayé, mais ça ne marche pas ... aussi, il se connecte à une API que je développe aussi ...
Pouvez-vous créer un Stackblitz minimal pour le code? Tout devrait être possible via async / attendre et promesses, alors je devine qu'il n'y a qu'une petite erreur quelque part
Je pensais que! Que cela puisse être fait avec async / attendre ... mais je ne trouve pas comment ... je vais essayer de mettre quelque chose à Stackblitz ...
Cela se fait avec Async Await, mais à un moment donné, vous devez convertir l'observable en une promesse d'utiliser ASYNC Await. Mais si vous mettez un stackblitz ensemble heureux de regarder
Je peux vous donner accès au référentiel à Github si vous voulez ... faites le moi savoir, je vais essayer aussi Stackblitz. Merci!
Stackblitz est probablement plus facile car alors il n'y a pas autant de code supplémentaire à s'inquiéter, mais sinon, vous pouvez utiliser codesandbox.io qui peut lier directement à un repo github
Vous pouvez l'utiliser comme ça
Définissez votre variable comme étape 1: Créez une fonction pour obtenir des données à partir de la requête postale dans votre page.TS Fichier P> // create a variable for httpOptions
const httpOptions = {
headers: new HttpHeaders({'Content-Type': 'application/json'})
headers.append('Token', this.Token); //stored token in a variable or directly append your token here.
headers.append('id', this.ID);
};
// sent this header and your token along with the post request.
Essayer de faire cela ... La seule chose est que j'ai besoin des en-têtes de la Post . J'ai un getheers c'est async parce qu'il obtient un jeton de stockage ... Je ne sais pas comment ajouter cela, à l'appel postal que vous faites ici .. . (En outre, le délai d'attente (20000) ne fonctionne pas)
@CarlonChoboy Pour les en-têtes Vous pouvez importer des en-têtes HTTPS dans votre page. Et puis vous pouvez utiliser l'en-tête en prenant une variable comme: const httpoptions = {en-têtes: nouveaux httpheaders ({'Type de contenu': 'Application / JSON'})}; Voir la réponse mise à jour pour plus de clarification.
@CarlonChoboy pour le problème du délai d'attente Vous devez importer l'opérateur de timeout rxjs comme - importer 'rxjs / ajouter / opérateur / timeout'; et cela - importer {CatchError, Tap} de "RxJ / Opérateurs";
Merci! Le problème avec Timeout est qu'il est indiqué: «Timeout» de la propriété n'existe pas sur le type 'observable