Last active
October 2, 2024 12:45
-
-
Save cba85/34fef5ac32b9a41570a5cc4c9dde7005 to your computer and use it in GitHub Desktop.
IPI Toulouse 2024-2025 - IJVS020
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const loadButton = document.querySelector("#load"); | |
| const loadingElement = document.querySelector("#loading"); | |
| const errorElement = document.querySelector(".error"); | |
| const usersListElement = document.querySelector("#users"); | |
| loadButton.addEventListener("click", async function (event) { | |
| event.preventDefault(); | |
| loadingElement.style.display = "block"; | |
| let response; | |
| try { | |
| response = await fetch("https://jsonplaceholder.typicode.com/users"); | |
| } catch (error) { | |
| usersListElement.innerHTML = ""; | |
| errorElement.textContent = `Vous n'êtes pas connecté à internet`; | |
| errorElement.style.display = "block"; | |
| return; | |
| } | |
| if (!response.ok) { | |
| loadingElement.style.display = "none"; | |
| errorElement.textContent = `Impossible de récupérer les utilisateurs (erreur ${response.status})`; | |
| errorElement.style.display = "block"; | |
| return; | |
| } | |
| const users = await response.json(); | |
| errorElement.textContent = ""; | |
| errorElement.style.display = "none"; | |
| loadingElement.style.display = "none"; | |
| usersListElement.innerHTML = ""; | |
| for (const user of users) { | |
| // <li>Leanne Graham ([email protected])</li> | |
| const liElement = document.createElement("li"); | |
| liElement.textContent = `#${user.id} ${user.name} (${user.email})`; | |
| usersListElement.appendChild(liElement); | |
| } | |
| }); | |
| async function getSuperheroes() { | |
| const res = await fetch("https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json"); | |
| const superheroes = await res.json(); | |
| console.log(superheroes); | |
| } | |
| getSuperheroes(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //const response = fetch("https://jsonplaceholder.typicode.com/users", { method: "GET" }); | |
| //const response = fetch("https://jsonplaceholder.typicode.com/users"); | |
| //console.log(response); | |
| const loadButton = document.querySelector("#load"); | |
| loadButton.addEventListener("click", function (event) { | |
| event.preventDefault(); | |
| const loadingElement = document.querySelector("#loading"); | |
| const errorElement = document.querySelector(".error"); | |
| loadingElement.style.display = "block"; | |
| fetch("https://jsonplaceholder.typicode.com/users").then(function (response) { | |
| console.log(response); | |
| if (!response.ok) { | |
| loadingElement.style.display = "none"; | |
| errorElement.textContent = `Impossible de récupérer les utilisateurs (erreur ${response.status})`; | |
| errorElement.style.display = "block"; | |
| return; | |
| } | |
| response.json().then(function (users) { | |
| console.log(users); | |
| errorElement.textContent = ""; | |
| errorElement.style.display = "none"; | |
| loadingElement.style.display = "none"; | |
| const usersListElement = document.querySelector("#users"); | |
| usersListElement.innerHTML = ""; | |
| for (const user of users) { | |
| // <li>Leanne Graham ([email protected])</li> | |
| const liElement = document.createElement("li"); | |
| liElement.textContent = `${user.name} (${user.email})`; | |
| usersListElement.appendChild(liElement); | |
| } | |
| }).catch(function (error) { | |
| console.error(error); | |
| }); | |
| }).catch(function (error) { | |
| console.error("[ERROR]"); | |
| console.error(error); | |
| loadingElement.style.display = "none"; | |
| }); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Users</title> | |
| <!-- <script src="xmlhttprequest.js" defer></script> --> | |
| <!-- <script src="fetch-promises.js" defer></script> --> | |
| <script src="fetch-async.js" defer></script> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"> | |
| <style> | |
| .error { | |
| font-weight: bold; | |
| color: red; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Users</h1> | |
| <button id="load">Load users</button> | |
| <p id="loading" style="display: none">Chargement en cours... Veuillez patienter...</p> | |
| <p class="error" style="display: none"></p> | |
| <ul id="users"></ul> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const request = new XMLHttpRequest(); | |
| function getUsers() { | |
| if (request.status != 200) { | |
| console.error(`Error ${request.status}`); | |
| return; | |
| } | |
| const users = request.response; | |
| console.log("LOAD"); | |
| document.querySelector("#loading").style.display = "none"; | |
| const usersListElement = document.querySelector("#users"); | |
| for (const user of users) { | |
| // <li>Leanne Graham ([email protected])</li> | |
| const liElement = document.createElement("li"); | |
| liElement.textContent = `${user.name} (${user.email})`; | |
| usersListElement.appendChild(liElement); | |
| } | |
| } | |
| try { | |
| request.open("GET", "https://jsonplaceholder.typicode.com/users"); | |
| request.responseType = "json"; | |
| request.addEventListener("load", function () { | |
| //getUsers(); | |
| setTimeout(() => { | |
| getUsers(); | |
| }, 1000); | |
| }); | |
| request.addEventListener("error", function () { | |
| console.error("Erreur XHR"); | |
| }); | |
| request.send(); | |
| } catch (error) { | |
| console.log("Error", error); | |
| } | |
| console.log("END"); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment