Exercices sur fetch et les Promise

Exercice 0 : préparation

Dans le dossier bre05-js-j7 créez un dossier fetch

Exercice 1 : récupérer les données d'un utilisateur

Dans le dossier fetch, créez un dossier exercice-1. Dans le dossier exercice-1 créez un fichier index.html et un fichier index.js.

<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <title>Exercice 1 Fetch</title>
    </head>
    <body>

    <script type="application/javascript" src="index.js"></script>
    </body>
</html>

let url = "https://corsproxy.io/?" + encodeURIComponent(
    "https://maridoucet.sites.3wa.io/user-api/user/15"
);

Vous allez utiliser fetch pour appeler l'URL ci-dessus et récupérer les infos qu'elle vous renvoie en JSON. Affichez ensuite l'objet avec un console.log().

Résultat attendu

/*
{
    data : 
    {
        email : "clark.kent@daily-planet.com"
        firstName : "Clark"
        id : 15
        lastName : "Kent"
        username: "Superman"
    }
}
 */

Exercice 2 : récupérer un tableau de données utilisateurs

Dans le dossier fetch, créez un dossier exercice-2. Dans le dossier exercice-2 créez un fichier index.html et un fichier index.js.

<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <title>Exercice 2 Fetch</title>
    </head>
    <body>

    <script type="application/javascript" src="index.js"></script>
    </body>
</html>

let url = "https://corsproxy.io/?" + encodeURIComponent(
    "https://maridoucet.sites.3wa.io/user-api/users"
);

Vous allez utiliser fetch pour appeler l'URL ci-dessus et récupérer les infos qu'elle vous renvoie en JSON. Affichez ensuite l'objet avec un console.log().

Résultat attendu (il peut y avoir plus de données)

/*
{
  data: [
    {
      "id": 15,
      "username": "Superman",
      "firstName": "Clark",
      "lastName": "Kent",
      "email": "clark.kent@daily-planet.com"
    },
    {
      "id": 16,
      "username": "Wonder Woman",
      "firstName": "Diana",
      "lastName": "Prince",
      "email": "diana.prince@amazon.com"
    },
    {
      "id": 17,
      "username": "Black Widow",
      "firstName": "Natasha",
      "lastName": "Romanov",
      "email": "natasha.romanov@shield.us.gov"
    },
    {
      "id": 18,
      "username": "Captain America",
      "firstName": "Steve",
      "lastName": "Rogers",
      "email": "steve.rogers@avengers.com"
    }
  ]
}
 */

Exercice 3 : envoyer des informations

Dans le dossier fetch, créez un dossier exercice-3. Dans le dossier exercice-3 créez un fichier index.html et un fichier index.js.

<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <title>Exercice 3 Fetch</title>
    </head>
    <body>

    <script type="application/javascript" src="index.js"></script>
    </body>
</html>

let url = "https://corsproxy.io/?" + encodeURIComponent(
    "https://maridoucet.sites.3wa.io/user-api/create-user"
);

Vous allez utiliser fetch pour appeler l'URL ci-dessus et lui envoyer des informations pour créer un utilisateur avec la méthode POST.

À cause de la façon dont était codée l'API que je réutilise pour ces exercices, vous allez devoir utiliser une solution fournie par JavaScript : les FormData (l'explication du pourquoi du comment viendra au moment du module PHP 😁).

let formData = new FormData();
formData.append('username', "Votre surnom");
formData.append('firstName', "Votre prénom");
formData.append('lastName', "Votre nom");
formData.append('email', "Votre email 3WA");

let body = {
    method: 'POST',
    body: formData
};

Dans le code ci-dessus remplacez les textes d'exemples par vos vraies valeurs, et vous pourrez ensuite passer ce body à fetch pour envoyer vos informations.

Essayez de rappeler le fetch de votre exercice 2, vous devriez avoir des données supplémentaires :)

Exercice 4 : générer du HTML avec les infos récupérées avec fetch

Dans le dossier fetch, créez un dossier exercice-4. Dans le dossier exercice-4 créez un fichier index.html et un fichier index.js.

<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <title>Exercice 4 Fetch</title>
    </head>
    <body>

    <script type="application/javascript" src="index.js"></script>
    </body>
</html>

let url = "https://corsproxy.io/?" + encodeURIComponent(
    "https://maridoucet.sites.3wa.io/user-api/user/18"
);

Après avoir récupéré les infos avec fetch, faites en sorte de les afficher dans le DOM :

username est un h1
firstName et lastName dans un h2 unique
email dans un h3

15 January 2026