Contenu du cours
Maîtrise Avancée de JavaScript
Maîtrise Avancée de JavaScript
Intégration Pratique de l'API
Lors de l'utilisation des API, les méthodes HTTP les plus courantes sont GET et POST:
- GET: Utilisé pour récupérer des données d'un serveur;
- POST: Utilisé 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 récupère des données d'un serveur sans modifier aucune ressource.
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 du post est extrait et 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 le point de terminaison spécifié (/posts
) avec la 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 formatées en JSON avec des détails pour un nouveau post, tels que title
, body
et userId
. Après la requête, la réponse du serveur est analysée en tant que 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 servent à des fins différentes. En plus de GET et POST, les méthodes courantes incluent :
- PUT : Utilisé pour mettre à jour une ressource existante ;
- DELETE : Utilisé 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 des données
index.html
index.js
La fonction updatePost
envoie une requête PUT
au point de terminaison spécifié (/posts/1
) pour 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 formatées en JSON, y compris un id
, un title
mis à jour, un body
et un userId
. Une fois la réponse reçue, elle est analysée en tant que 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
) pour supprimer un post spécifique. Le method: 'DELETE'
spécifie l'action. Après la requête, le statut de la réponse est vérifié avec response.ok
: si elle réussit, un message de succès ("Post supprimé avec succès.") est affiché dans le HTML. Si la suppression échoue, un message d'erreur apparaît à la place.
Utilisation des paramètres de requête dans les requêtes API
Les paramètres de requête vous 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 d'accès API avec un paramètre de requête (userId=1
), qui filtre les publications pour ne conserver que celles appartenant à l'utilisateur spécifié. Le userId
est ajouté directement à l'URL en tant que paramètre de requête. Après avoir reçu les données filtrées, la fonction affiche le nombre de publications trouvées pour cet utilisateur dans le HTML.
1. Quelle méthode HTTP utiliseriez-vous pour récupérer des données d'un serveur sans modifier aucune ressource ?
2. Lequel des éléments suivants confirmera une requête DELETE réussie ?
Merci pour vos commentaires !