Travailler Avec les APIs

Qu'est-ce qu'une API et comment interagissons-nous avec elle ?

En développement web, les API permettent à votre code JavaScript d'interagir avec des services externes, tels que la récupération de données depuis un serveur, la soumission de données de formulaire ou l'intégration de services tiers.

Dans les applications JavaScript modernes, les API sont souvent utilisées pour :

• Récupérer des données depuis un serveur (par exemple, récupérer des données météorologiques, des articles de presse ou des détails de produits) ;
• Envoyer des données à un serveur (par exemple, soumettre un formulaire ou enregistrer les préférences de l'utilisateur) ;
• Travailler avec des services tiers (par exemple, Google Maps, Twitter API, passerelles de paiement).

Nous interagissons avec les API en envoyant des requêtes HTTP à un point de terminaison d'API, et le serveur répond avec des données, généralement au format JSON.

Envoi de requêtes HTTP avec fetch()

La fonction fetch() est une méthode moderne pour effectuer des requêtes réseau en JavaScript. Elle retourne une Promise, qui se résout lorsque la requête est terminée.

Cet exemple illustre comment effectuer une requête HTTP GET à une API en utilisant fetch(). La fonction fetchData envoie une requête au point de terminaison spécifié (https://jsonplaceholder.typicode.com/posts/1). Une fois la réponse reçue, response.json() analyse les données JSON. Le titre du post est ensuite extrait des données analysées et affiché dans le paragraphe HTML.

Gestion des réponses API : Analyser JSON et vérifier le statut de la réponse

Après avoir envoyé une requête API, il est important de vérifier si la requête a réussi et de gérer correctement la réponse. Dans la plupart des cas, les données retournées par une API sont au format JSON, vous devez donc les analyser en utilisant response.json().

De plus, vous devez toujours vérifier le statut de la réponse pour vous assurer que la requête a réussi (code de statut 200–299).

Cet exemple démontre la gestion du statut de réponse d'une requête API. La fonction fetchAndCheckStatus envoie une requête à un point de terminaison API, puis vérifie si la réponse est réussie en utilisant response.ok, qui retourne true pour les codes de statut dans la plage 200–299. Si la requête est réussie, les données JSON sont analysées et affichées. Si la requête échoue, le code d'erreur de statut est affiché dans le HTML.

Gestion des erreurs avec les API et traitement des échecs réseau

Lors de l'utilisation des API, il est crucial de gérer les erreurs potentielles telles que :

• Échecs réseau : Le serveur peut être inaccessible en raison de problèmes de réseau ;
• Réponses invalides : L'API peut retourner une erreur (par exemple, 404 Not Found ou 500 Server Error).

Vous pouvez gérer les erreurs en utilisant try...catch avec fetch() pour gérer à la fois les erreurs réseau et les erreurs de réponse de l'API.

Cet exemple montre comment gérer efficacement les erreurs d'API. La fonction fetchWithErrorHandling utilise try...catch pour gérer à la fois les erreurs réseau et les réponses d'API invalides. Si la requête vers l'URL invalide échoue, ou si le code de statut de la réponse est en dehors de la plage 200–299, une erreur est lancée avec un message spécifique. Le bloc catch affiche ensuite le message d'erreur dans le HTML. Cette méthode garantit que tout problème avec l'appel d'API, tel qu'un mauvais point de terminaison ou des problèmes de connectivité, est géré de manière élégante et communiqué clairement à l'utilisateur.