Fetch

Introduction à Fetch

Dans le développement web moderne, la communication avec des serveurs distants est une fonctionnalité essentielle. La fonction fetch est une fonction intégrée à JavaScript qui permet d'effectuer des requêtes HTTP et de récupérer des données à partir de serveurs. Elle offre une alternative aux anciennes méthodes telles que XMLHttpRequest en fournissant une interface plus simple et plus puissante.

La fonction fetch est largement utilisée dans le développement web, et une bonne compréhension de son utilisation avec la méthode GET est essentielle pour tout développeur web. Préparez-vous à plonger dans le monde de fetch et à découvrir ses fonctionnalités puissantes pour la communication avec les serveurs distants.

Utilisation de Fetch avec la méthode GET

Maintenant que nous avons une compréhension de base de la fonction fetch et de son importance dans la communication avec les serveurs, nous allons nous concentrer sur son utilisation spécifique avec la méthode GET. La méthode GET est couramment utilisée pour récupérer des données à partir d'un serveur en spécifiant des paramètres dans l'URL de la requête.

Envoi d'une requête GET avec Fetch

Pour envoyer une requête GET avec fetch, nous devons fournir l'URL de la ressource que nous souhaitons récupérer. Cette URL peut inclure des paramètres GET pour spécifier des critères de recherche, des filtres ou d'autres informations nécessaires pour obtenir les données souhaitées.

La syntaxe de base pour envoyer une requête GET avec fetch est la suivante :

fetch(url)
  .then(response => {
    // Gérer la réponse
  })
  .catch(error => {
    // Gérer les erreurs
  });

Dans cet exemple, url représente l'URL de la ressource que nous souhaitons récupérer. La fonction fetch renvoie une promesse qui sera résolue avec la réponse de la requête. Nous utilisons ensuite les méthodes .then() et .catch() pour gérer respectivement la réponse et les erreurs éventuelles.

Exemples de code pour la méthode GET

Voyons maintenant quelques exemples de code concrets pour illustrer l'utilisation de fetch avec la méthode GET.

Exemple 1 : Récupération de données JSON

Supposons que nous souhaitons récupérer des données JSON à partir d'une API publique. Voici comment nous pouvons le faire avec fetch :

fetch('https://exemple-api.com/data')
  .then(response => response.json())
  .then(data => {
    // Utiliser les données récupérées
  })
  .catch(error => {
    // Gérer les erreurs
  });

Dans cet exemple, nous utilisons la méthode .json() pour extraire les données JSON de la réponse. Ensuite, nous pouvons utiliser ces données dans notre application.

Exemple 2 : Gestion des réponses

Parfois, nous devons effectuer des opérations spécifiques en fonction de la réponse du serveur. Voici un exemple qui illustre comment gérer différentes réponses en fonction de leur code d'état :

fetch('https://exemple-api.com/data')
  .then(response => {
    if (response.ok) {
      // Traitement pour une réponse réussie (code d'état 200-299)
    } else if (response.status === 404) {
      // Traitement pour une réponse avec code d'état 404 (non trouvé)
    } else {
      // Traitement pour d'autres codes d'état
    }
  })
  .catch(error => {
    // Gérer les erreurs
  });

Dans cet exemple, nous utilisons la propriété ok de la réponse pour vérifier si la requête a réussi (code d'état 200-299). Ensuite, nous pouvons effectuer différentes opérations en fonction du code d'état de la réponse.

Exemples de réponses pour la méthode GET

Pour mieux comprendre le fonctionnement de fetch avec la méthode GET, voici quelques exemples de réponses fictives que nous pourrions recevoir lors de l'utilisation de fetch :

• Réponse avec un code d'état 200 (OK) et des données JSON :

  {
    "id": 1,
    "name": "John Doe",
    "age": 30
  }

• Réponse avec un code d'état 404 (Non trouvé) :

  Not Found

• Réponse avec un code d'état 500 (Erreur interne du serveur) :

  Internal Server Error

Ces exemples illustrent différentes formes que peuvent prendre les réponses et montrent comment vous pouvez extraire les données pertinentes à partir de celles-ci.

Nous avons à présent une compréhension solide de l'utilisation de fetch avec la méthode GET. Dans la prochaine section, nous aborderons la récupération des paramètres GET dans les URLs, ce qui nous permettra de manipuler et d'utiliser ces paramètres dans nos requêtes.

Récupération des paramètres GET dans les URLs

Lorsque nous utilisons la méthode GET, nous avons souvent besoin de transmettre des informations supplémentaires dans l'URL de la requête. Ces informations sont généralement appelées paramètres GET et sont spécifiées après le point d'interrogation dans l'URL. Dans cette section, nous allons explorer différentes méthodes pour récupérer et utiliser ces paramètres en JavaScript.

Comprendre les paramètres GET dans les URLs

Avant de pouvoir récupérer les paramètres GET, il est important de comprendre leur structure dans les URLs. Les paramètres GET sont ajoutés à l'URL après un point d'interrogation (?) et sont séparés par des ampersands (&). Chaque paramètre est composé d'un nom et d'une valeur, séparés par un signe égal (=). Par exemple :

https://exemple-api.com/data?param1=valeur1&param2=valeur2

Dans cet exemple, nous avons deux paramètres GET : param1 avec la valeur valeur1 et param2 avec la valeur valeur2.

Récupérer les paramètres GET en JavaScript

Utilisation de l'objet URLSearchParams

L'objet URLSearchParams est un objet intégré à JavaScript qui permet de manipuler facilement les paramètres GET dans une URL. Voici comment l'utiliser pour récupérer les paramètres GET :

const urlParams = new URLSearchParams(window.location.search);
const param1 = urlParams.get('param1');
const param2 = urlParams.get('param2');

Dans cet exemple, nous utilisons URLSearchParams avec window.location.search pour obtenir les paramètres GET de l'URL actuelle. Ensuite, nous utilisons la méthode get() pour récupérer la valeur de chaque paramètre.

Exercices

Prévisions météorologiques pour la semaine

Dans cet exercice, vous allez utiliser une API de météo pour récupérer les données de prévision pour la ville de Wavre. Vous devrez afficher la météo actuelle et ajouter une prévision pour chaque jour de la semaine.

Instructions

1. Consultez la documentation de l'API de météo ici pour comprendre comment utiliser l'API et les données disponibles.

2. Utilisez l'URL suivante pour effectuer une requête à l'API et récupérer les données de prévision pour la ville de Wavre :

   https://api.open-meteo.com/v1/forecast?latitude=50.7172&longitude=4.6014&hourly=temperature_2m,precipitation,cloudcover

3. À l'aide de la fonction fetch, récupérez les données de prévision à partir de l'URL fournie.

4. Affichez la météo actuelle en extrayant les informations pertinentes des données de prévision. Vous pouvez afficher des détails tels que la température, les précipitations et la couverture nuageuse.

5. À l'aide des données de prévision, ajoutez une prévision pour chaque jour de la semaine à venir. Affichez les informations pertinentes pour chaque jour, telles que la température maximale et minimale, les précipitations et la couverture nuageuse.

6. Testez votre application en l'exécutant et en vérifiant que les données de prévision sont correctement récupérées et affichées.

Exemple de résultat attendu

Voici un exemple de résultat attendu pour votre application :

Météo actuelle :
- Température : 15°C
- Précipitations : 0.5 mm
- Couverture nuageuse : 60%

Prévisions pour la semaine :
- Lundi : Température maximale : 18°C, Température minimale : 12°C, Précipitations : 1 mm, Couverture nuageuse : 70%
- Mardi : Température maximale : 20°C, Température minimale : 13°C, Précipitations : 0.2 mm, Couverture nuageuse : 50%
- Mercredi : Température maximale : 22°C, Température minimale : 15°C, Précipitations : 0 mm, Couverture nuageuse : 30%
- Jeudi : Température maximale : 19°C, Température minimale : 11°C, Précipitations : 0.5 mm, Couverture nuageuse : 60%
- Vendredi : Température maximale : 17°C, Température minimale : 10°C, Précipitations : 0.3 mm, Couverture nuageuse : 40%
- Samedi : Température maximale : 16°C, Température minimale : 9°C, Précipitations : 0 mm, Couverture nuageuse : 20%
- Dimanche : Température maximale : 15°C, Température minimale : 8°C, Précipitations : 0 mm, Couverture nuageuse : 10%

Remarques

• Assurez-vous de manipuler les données de l'API correctement en extrayant les informations nécessaires pour afficher la météo actuelle et les prévisions pour chaque jour de la semaine.
• Vous pouvez utiliser des méthodes telles que .toFixed() pour formater les nombres avec un nombre fixe de décimales.
• N'hésitez pas à utiliser des boucles ou des méthodes de manipulation de tableaux pour afficher les prévisions pour chaque jour de la semaine de manière plus efficace.

Références

• Documentation de l'API de météo

Création d'une application utilisant une API de votre choix

Dans cet exercice, vous allez utiliser une API de votre choix pour créer une petite application. Vous pouvez choisir parmi les API recommandées disponibles sur RapidAPI ou explorer d'autres sources pour trouver une API qui correspond à vos intérêts.

Instructions

1. Explorez les différentes API recommandées sur RapidAPI ou recherchez une API qui correspond à vos intérêts. Choisissez une API qui offre des fonctionnalités intéressantes pour votre application.

2. Inscrivez-vous sur la plateforme de l'API et obtenez une clé d'accès (API key) si nécessaire. Cette clé sera utilisée pour authentifier vos requêtes à l'API.

3. Réfléchissez à l'objectif de votre application et aux fonctionnalités que vous souhaitez implémenter en utilisant l'API choisie. Par exemple, vous pouvez créer une application de recherche de recettes, une application de suivi des conditions météorologiques, une application de traduction, ou toute autre idée qui vous intéresse.

4. Utilisez la documentation de l'API pour comprendre comment effectuer des requêtes et récupérer les données souhaitées. Familiarisez-vous avec les paramètres de requête, les endpoints et les formats de réponse.

5. Implémentez votre application en utilisant JavaScript et les outils de développement web de votre choix (par exemple, HTML, CSS, frameworks JavaScript, etc.). Utilisez la clé d'accès (API key) si nécessaire pour authentifier vos requêtes à l'API.

6. Testez votre application en l'exécutant et en vérifiant que les fonctionnalités que vous avez implémentées fonctionnent correctement. Assurez-vous que les données de l'API sont correctement récupérées et affichées dans votre application.

7. Personnalisez votre application en ajoutant des fonctionnalités supplémentaires ou en améliorant l'interface utilisateur. Soyez créatif et faites en sorte que votre application soit conviviale et attrayante.

Références

• RapidAPI - Collection des API recommandées
• Documentation de l'API choisie (fournie sur la plateforme de l'API)