Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Intégration Pratique de l'API | JavaScript Asynchrone et APIs
Maîtrise Avancée de JavaScript
course content

Contenu du cours

Maîtrise Avancée de JavaScript

Maîtrise Avancée de JavaScript

2. Manipulation du DOM
3. Événements et Gestion des Événements
4. JavaScript Asynchrone et APIs

book
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.

html

index.html

js

index.js

copy

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.

html

index.html

js

index.js

copy

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

html

index.html

js

index.js

copy

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

html

index.html

js

index.js

copy

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

html

index.html

js

index.js

copy

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 ?

Quelle méthode HTTP utiliseriez-vous pour récupérer des données d'un serveur sans modifier aucune ressource ?

Quelle méthode HTTP utiliseriez-vous pour récupérer des données d'un serveur sans modifier aucune ressource ?

Sélectionnez la réponse correcte

Lequel des éléments suivants confirmera une requête DELETE réussie ?

Lequel des éléments suivants confirmera une requête DELETE réussie ?

Sélectionnez la réponse correcte

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 4. Chapitre 6
We're sorry to hear that something went wrong. What happened?
some-alt