当我尝试从此文件 https://type.fit/api/quotes 加载来自 API 的引号时，我遇到了这个问题 [object Promise] 。在页面顶部，加载程序完成后，应加载引号，这些引号在页面 https://type.fit/api/quotes 中定义。 。我为此使用异步等待函数。我有下一个函数:selectAndReturnRandomQuote，这个函数调用loadQuotesFromJSON，它实际上在链接上获取并返回引号，在函数结束时我在页面上返回打印，如下所示“今日引用:” + quote.quoteOfAuthor + “by “+引用.作者.接下来我有 uploadQuote，它实际上使用innerHTML 将我的结果放在页面上。函数 sleep 和 setLoader 用于在实际显示之前进行加载引用。下面是我的代码片段。
"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>最佳答案
"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;
}
async function uploadQuote(){
document.getElementById('randomeQuotes').innerHTML = await 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-image: url(pozadinalogin.png);
background-repeat: no-repeat;
background-size: 530x 510px;
background-color:cadetblue;
background-position: 80px 90px;
}<!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>async function uploadQuote(){
document.getElementById('randomeQuotes').innerHTML = await selectAndReturnRandomQuote();
}
关于javascript - JS : How to solve this [object Promise]?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69656000/