尝试从API获取，但要获得[对象承诺]

发布于 2025-01-27 10:21:19 字数 1192 浏览 0 评论 0原文

我正在尝试制作一个网站，该网站从诗中获取10行，然后在HTML文件中输出它们，而不是获取我得到的.json数据[Object Promise]。有人可以帮我吗？

这是我的代码：

JS：

let url = 'https://poetrydb.org/random,linecount/1;10/title,author,lines.json'
const button = document.getElementById('button')
const body = document.getElementById('poem')

async function requestPoem(url) {
    await fetch(url)
    .then((response)=>{
        let data = response.json()
        return data
    })
}

button.onclick = ()=>{
    body.innerHTML = requestPoem(url)
}

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script defer src="scripts/main.js"></script>
    <title>poem request</title>
</head>
<body>
    <p id="poem"></p>
    <button id="button">request poem</button>
</body>
</html>

原文

I'm trying to make a website that fetches a random 10 lines from a poem and then outputs them in the HTML file but instead of getting the .json data I'm getting [object Promise]. Can someone help me out?

Here's my code:

JS:

let url = 'https://poetrydb.org/random,linecount/1;10/title,author,lines.json'
const button = document.getElementById('button')
const body = document.getElementById('poem')

async function requestPoem(url) {
    await fetch(url)
    .then((response)=>{
        let data = response.json()
        return data
    })
}

button.onclick = ()=>{
    body.innerHTML = requestPoem(url)
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script defer src="scripts/main.js"></script>
    <title>poem request</title>
</head>
<body>
    <p id="poem"></p>
    <button id="button">request poem</button>
</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

葬﹪忆之殇 2025-02-03 10:21:20

requestPoem是async函数，因此它只能返回承诺。您无法避免承诺，但是可以通过调用。结果。另外，您当前的requestPoem函数没有返回语句，因此需要一个来定义承诺的决心。

async function requestPoem(url) {
  const response = await fetch(url);
  return response.json();
}

button.onclick = async () => {
  body.innerHTML = await requestPoem(url);
}

requestPoem is an async function, so it can only ever return a promise. You can't avoid the promise, but you can use it, either by calling .then on it, or by putting your code in an async function and awaiting the result. Also, your current requestPoem function has no return statement, so it will need one to define what the promise resolves to.

async function requestPoem(url) {
  const response = await fetch(url);
  return response.json();
}

button.onclick = async () => {
  body.innerHTML = await requestPoem(url);
}

回复收藏 0 原文