Intégration des API dans les Applications JavaScript
Lors de l'utilisation des API, les méthodes HTTP les plus courantes sont GET et POST :
- GET : Utilisée pour récupérer des données depuis un serveur ;
- POST : Utilisée pour envoyer des données à un serveur, généralement lors de la soumission de formulaires ou de l'envoi de données JSON.
Exemple de requête GET
Une requête GET permet de récupérer des données depuis un serveur sans modifier les ressources.
index.html
index.js
La fonction fetchPost utilise la méthode fetch() pour envoyer une requête à un point de terminaison spécifié (/posts/1). Une fois la réponse reçue, les données sont analysées en tant que JSON, et le titre de l'article est extrait puis affiché dans le paragraphe HTML.
Exemple de requête POST
Une requête POST envoie des données au serveur, souvent utilisée pour créer de nouvelles ressources ou soumettre des données de formulaire.
index.html
index.js
La fonction sendPostRequest effectue une requête vers l’endpoint spécifié (/posts) avec la propriété method définie sur 'POST'. Les en-têtes incluent 'Content-Type': 'application/json' pour indiquer que des données JSON sont envoyées. Le body contient des données au format JSON avec les détails d’un nouveau post, tels que title, body et userId. Après la requête, la réponse du serveur est analysée en JSON, et le titre du post créé est affiché dans le HTML.
Envoi d’en-têtes et gestion des différentes méthodes HTTP (GET, POST, PUT, DELETE)
Les différentes méthodes HTTP ont des objectifs distincts. En plus de GET et POST, les méthodes courantes incluent :
- PUT : Utilisée pour mettre à jour une ressource existante ;
- DELETE : Utilisée pour supprimer une ressource du serveur.
Vous pouvez également envoyer des en-têtes avec n’importe quelle méthode HTTP pour fournir des informations supplémentaires, telles que des jetons d’authentification ou le type de contenu.
Exemple de requête PUT : mise à jour de données
index.html
index.js
La fonction updatePost envoie une requête PUT à l'endpoint spécifié (/posts/1) afin de mettre à jour un post existant. La requête inclut method: 'PUT' pour spécifier l'action de mise à jour, et les headers sont définis pour inclure 'Content-Type': 'application/json', indiquant le format JSON. Le body contient des données au format JSON, comprenant un id, un title mis à jour, un body et un userId. Une fois la réponse reçue, elle est analysée en JSON et le titre mis à jour est affiché dans le HTML.
Exemple de requête DELETE : Suppression de données
index.html
index.js
La fonction deletePost envoie une requête DELETE à un point de terminaison spécifié (/posts/1) afin de supprimer un article spécifique. L'option method: 'DELETE' précise l'action à effectuer. Après la requête, le statut de la réponse est vérifié avec response.ok : en cas de succès, un message de confirmation (« Article supprimé avec succès. ») s'affiche dans le HTML. Si la suppression échoue, un message d'erreur apparaît à la place.
Utilisation des paramètres de requête dans les appels API
Les paramètres de requête permettent d'envoyer des informations supplémentaires dans l'URL, telles que le filtrage des données, le tri des résultats ou la spécification des numéros de page dans les réponses paginées.
Requête GET avec paramètres de requête
index.html
index.js
La fonction fetchPostsByUser envoie une requête à un point de terminaison d’API avec un paramètre de requête (userId=1), ce qui filtre les publications pour n’afficher que celles appartenant à l’utilisateur spécifié. Le userId est ajouté directement à l’URL en tant que paramètre de requête. Après réception des données filtrées, la fonction affiche le nombre de publications trouvées pour cet utilisateur dans le HTML.
1. Quelle méthode HTTP utiliser pour récupérer des données depuis un serveur sans modifier aucune ressource ?
2. Laquelle des propositions suivantes confirme une requête DELETE réussie ?
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Awesome!
Completion rate improved to 2.22
Intégration des API dans les Applications JavaScript
Glissez pour afficher le menu
Lors de l'utilisation des API, les méthodes HTTP les plus courantes sont GET et POST :
- GET : Utilisée pour récupérer des données depuis un serveur ;
- POST : Utilisée pour envoyer des données à un serveur, généralement lors de la soumission de formulaires ou de l'envoi de données JSON.
Exemple de requête GET
Une requête GET permet de récupérer des données depuis un serveur sans modifier les ressources.
index.html
index.js
La fonction fetchPost utilise la méthode fetch() pour envoyer une requête à un point de terminaison spécifié (/posts/1). Une fois la réponse reçue, les données sont analysées en tant que JSON, et le titre de l'article est extrait puis affiché dans le paragraphe HTML.
Exemple de requête POST
Une requête POST envoie des données au serveur, souvent utilisée pour créer de nouvelles ressources ou soumettre des données de formulaire.
index.html
index.js
La fonction sendPostRequest effectue une requête vers l’endpoint spécifié (/posts) avec la propriété method définie sur 'POST'. Les en-têtes incluent 'Content-Type': 'application/json' pour indiquer que des données JSON sont envoyées. Le body contient des données au format JSON avec les détails d’un nouveau post, tels que title, body et userId. Après la requête, la réponse du serveur est analysée en JSON, et le titre du post créé est affiché dans le HTML.
Envoi d’en-têtes et gestion des différentes méthodes HTTP (GET, POST, PUT, DELETE)
Les différentes méthodes HTTP ont des objectifs distincts. En plus de GET et POST, les méthodes courantes incluent :
- PUT : Utilisée pour mettre à jour une ressource existante ;
- DELETE : Utilisée pour supprimer une ressource du serveur.
Vous pouvez également envoyer des en-têtes avec n’importe quelle méthode HTTP pour fournir des informations supplémentaires, telles que des jetons d’authentification ou le type de contenu.
Exemple de requête PUT : mise à jour de données
index.html
index.js
La fonction updatePost envoie une requête PUT à l'endpoint spécifié (/posts/1) afin de mettre à jour un post existant. La requête inclut method: 'PUT' pour spécifier l'action de mise à jour, et les headers sont définis pour inclure 'Content-Type': 'application/json', indiquant le format JSON. Le body contient des données au format JSON, comprenant un id, un title mis à jour, un body et un userId. Une fois la réponse reçue, elle est analysée en JSON et le titre mis à jour est affiché dans le HTML.
Exemple de requête DELETE : Suppression de données
index.html
index.js
La fonction deletePost envoie une requête DELETE à un point de terminaison spécifié (/posts/1) afin de supprimer un article spécifique. L'option method: 'DELETE' précise l'action à effectuer. Après la requête, le statut de la réponse est vérifié avec response.ok : en cas de succès, un message de confirmation (« Article supprimé avec succès. ») s'affiche dans le HTML. Si la suppression échoue, un message d'erreur apparaît à la place.
Utilisation des paramètres de requête dans les appels API
Les paramètres de requête permettent d'envoyer des informations supplémentaires dans l'URL, telles que le filtrage des données, le tri des résultats ou la spécification des numéros de page dans les réponses paginées.
Requête GET avec paramètres de requête
index.html
index.js
La fonction fetchPostsByUser envoie une requête à un point de terminaison d’API avec un paramètre de requête (userId=1), ce qui filtre les publications pour n’afficher que celles appartenant à l’utilisateur spécifié. Le userId est ajouté directement à l’URL en tant que paramètre de requête. Après réception des données filtrées, la fonction affiche le nombre de publications trouvées pour cet utilisateur dans le HTML.
1. Quelle méthode HTTP utiliser pour récupérer des données depuis un serveur sans modifier aucune ressource ?
2. Laquelle des propositions suivantes confirme une requête DELETE réussie ?
Merci pour vos commentaires !