Qu'est-ce qu'une API et comment interagir 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, l'envoi 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, obtenir des données météorologiques, des articles d'actualité ou des détails de produits) ;
• Envoyer des données à un serveur (par exemple, soumettre un formulaire ou enregistrer les préférences d'un utilisateur) ;
• Utiliser des services tiers (par exemple, Google Maps, API Twitter, passerelles de paiement).

L'interaction avec les API se fait 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 la réalisation d'une requête HTTP GET vers une API en utilisant fetch(). La fonction fetchData envoie une requête à l'endpoint spécifié (https://jsonplaceholder.typicode.com/posts/1). Une fois la réponse reçue, response.json() analyse les données JSON. Le titre de l'article est ensuite extrait des données analysées et affiché dans le paragraphe HTML.

Gestion des réponses API : analyse du JSON et vérification du statut de la réponse

Après l'envoi d'une requête API, il est important de vérifier si la requête a réussi et de traiter correctement la réponse. Dans la plupart des cas, les données retournées par une API sont au format JSON, il est donc nécessaire de les analyser à l'aide de response.json().

De plus, il convient toujours de vérifier le statut de la réponse afin de s'assurer que la requête a réussi (code de statut 200–299).

Cet exemple illustre la gestion du statut de réponse d'une requête API. La fonction fetchAndCheckStatus envoie une requête à un point de terminaison d'API, puis vérifie si la réponse est réussie à l'aide de response.ok, qui retourne true pour les codes de statut compris entre 200 et 299. Si la requête aboutit, les données JSON sont analysées et affichées. En cas d'échec, le code d'erreur de statut est affiché dans le HTML.

Gestion des erreurs avec les APIs et gestion des échecs réseau

Lors de l'utilisation d'APIs, il est essentiel 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).

La gestion des erreurs peut s'effectuer à l'aide de try...catch associé à fetch() pour traiter à 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 levé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 lié à l'appel d'API, tel qu'un mauvais point de terminaison ou des problèmes de connectivité, est géré de manière appropriée et communiqué clairement à l'utilisateur.