27. Gérer les requêtes POST
Les requêtes POST sont utilisées pour envoyer des données au serveur afin de créer une nouvelle ressource.
Utiliser HttpClient.post()
La méthode post prend trois arguments :
- L'URL du endpoint.
- Le corps de la requête (le payload, les données à envoyer).
- (Optionnel) Des options de configuration (headers, paramètres).
typescript // data.service.ts
interface NewPostData { title: string; body: string; userId: number; }
// Renvoie l'objet créé (souvent avec un nouvel ID assigné par le serveur)
createPost(postData: NewPostData) {
return this.http.post
S'abonner et gérer la réponse
Dans le composant, nous appelons la méthode du service et nous nous abonnons. La réponse confirme souvent que la ressource a été créée et inclut parfois l'objet complet avec les propriétés assignées par le serveur (comme un id).
typescript // post-creator.component.ts
newPost: NewPostData = { title: 'Titre de test', body: 'Corps de test', userId: 1 };
onSubmit() {
this.dataService.createPost(this.newPost).subscribe({
next: (response) => {
console.log('Article créé avec succès :', response);
alert(Article ID ${response.id} créé !);
// Réinitialiser le formulaire ou naviguer ailleurs
},
error: (err) => {
console.error('Erreur lors de la création de l'article :', err);
}
});
}
Important : Headers et Type de contenu
L' HttpClient d'Angular définit automatiquement le header Content-Type sur application/json pour les requêtes POST lorsque le payload est un objet JavaScript, garantissant ainsi que le serveur sache comment analyser les données.