J'ai ce problème [object Promise], lorsque j'essaie de charger des citations d'une API à partir de ce fichier https://type.fit/api/quotes . En haut de la page, une fois le chargeur terminé, les citations définies sur la page doivent être chargées. https://type.fit/api/quotes . J'utilise pour cela une fonction asynchrone (await). J'ai la fonction suivante : selectAndReturnRandomQuote, cette fonction appelle loadQuotesFromJSON, qui fait une recherche sur le lien et renvoie les citations, à la fin de la fonction je renvoie l'impression sur la page comme ceci "Citation du jour : " + quote.quoteOfAuthor + " par " + quote.author. Ensuite j'ai uploadQuote, qui en fait avec innerHTML met mon résultat sur la page. Les fonctions sleep et setLoader sont utilisées pour charger la citation avant qu'elle ne soit affichée. Voici mes extraits de code.
"use strict";
async function selectAndReturnRandomQuote() {
let quotesFromJSON = await loadQuotesFromJSON();
let quote = quotesFromJSON[Math.floor(Math.random() * quotesFromJSON.length)];
let result = "Quote of the day: " + quote.text+ " by " + quote.author;
return result;
}
function uploadQuote(){
document.getElementById('randomeQuotes').innerHTML = selectAndReturnRandomQuote();
}
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function setLoader() {
document.getElementById('randomeQuotes').innerHTML = "<img src='loader2.gif' width='28px' height='55px'>";
await sleep(1000);
await uploadQuote();
}
setLoader();
async function loadQuotesFromJSON() {
const response = await fetch('https://type.fit/api/quotes');
return response.json();
}
div {
white-space: pre-line;
margin-bottom: 1px;
background-color:aliceblue;
border-radius: 14px;
opacity:0.83;
width: 430px;
position:relative;
left: 80px;
border-style: solid;
border-width: 2.2px;
border-color:aquamarine;
}
img {
width: 100px;
border-radius: 50px;
border-style: solid;
border-width: 2.2px;
border-color:aquamarine;
}
body {
font-family: "Comic Sans MS", "Comic Sans", cursive;
width: 600px;
margin: auto;
text-align: center;
margin-top: 55px;
background-color:cadetblue;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Contact form</title>
<link rel="stylesheet" href="FormExternalStyles.css">
</head>
<body>
<div id = 'randomeQuotes' class = "marginbottom">
</div>
</body>
</html>
