Retour au cours

Gérer les requêtes PUT/DELETE (Mise à jour/Suppression)

Le Développeur Angular Complet : de Zéro à Héros

28. Gérer les requêtes PUT/DELETE

1. Requêtes PUT (Mise à jour)

Les requêtes PUT sont utilisées pour mettre à jour une ressource entière sur le serveur. Comme pour le POST, elles nécessitent un payload (les données mises à jour) et incluent généralement l'ID de la ressource dans le chemin de l'URL.

typescript // data.service.ts

updatePost(id: number, updatedData: Partial) { const url = ${this.baseUrl}/posts/${id}; // HttpClient.put() nécessite l'ID dans l'URL et le payload de mise à jour return this.http.put(url, updatedData); }

Dans le composant, vous vous abonnez et n'avez souvent pas besoin de l'objet retourné, seulement d'une confirmation de succès.

typescript // component.ts updateExistingPost(id: number) { const patch = { title: 'Titre mis à jour' }; this.dataService.updatePost(id, patch).subscribe(() => { console.log(Article ${id} mis à jour.); }); }

2. Requêtes DELETE (Suppression)

Les requêtes DELETE suppriment une ressource. Elles ne nécessitent que l'identifiant de la ressource (ID) dans l'URL et généralement aucun corps de requête.

typescript // data.service.ts

deletePost(id: number) { const url = ${this.baseUrl}/posts/${id}; // Le type de réponse est souvent void ou un objet vide {} return this.http.delete(url); }

Dans le composant :

typescript // component.ts deleteItem(id: number) { this.dataService.deletePost(id).subscribe({ next: () => { alert(Article ${id} supprimé avec succès.); // Rafraîchir la liste localement }, error: (e) => { console.error('Échec de la suppression :', e); } }); }