如何获取要在 HTML 上显示的数据

Question

我正在浏览 Coding Train 视频，并通过从Poemist API获取数据来尝试我自己的看法。 我可以从 API 中得到这首诗的标题以显示在控制台中； 但是，我无法在 HTML 上显示它（它只是显示未定义）。 有人知道我在这里可能做错了什么吗？ 下面是我的代码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Fetch a poem</title>
  </head>
  <body>
    <h1>Fetch a Poem</h1>
    <p id="poem">title</p>
    <script>
      console.log('about to fetch a poem');
      catchPoem()
        .then(poem => {
          document.getElementById('poem').innerText = poem;
          console.log('yay');
        })
        .catch(error => {
          console.log('error!');
          console.error(error);
        });

      async function catchPoem() {
        const response = await fetch('https://www.poemist.com/api/v1/randompoems');
        let json = await response.json();
        let title = json[0].title
        console.log(title);
      }
    </script>
  </body>
</html>

Answer 1

async function catchPoem() {
    const response = await fetch('https://www.poemist.com/api/v1/randompoems');
    let json = await response.json();
    let title = json[0].title
    // console.log(title);
    return title;
}

Answer 2

你没有从 function catchPoem返回任何东西，这就是你得到undefined的原因。 您只需要从 function 返回title 。

if (title) {
    return title;
  }

 console.log('about to fetch a poem'); catchPoem().then(poem => { document.getElementById('poem').innerText = poem; console.log('yay'); }).catch(error => { console.log('error;'). console;error(error); }): async function catchPoem() { const response = await fetch('https.//www.poemist;com/api/v1/randompoems'). let json = await response;json(). let title = json[0].title console;log(title); if (title) { return title } }

 <h1>Fetch a Poem</h1> <p id="poem">title</p>

如何获取要在 HTML 上显示的数据

问题描述

2 个解决方案

解决方案1
0 已采纳 2021-06-11 02:32:27

解决方案2
0 2021-06-11 02:40:16

如何获取要在 HTML 上显示的数据

问题描述

2 个解决方案

解决方案1 0 已采纳 2021-06-11 02:32:27

解决方案2 0 2021-06-11 02:40:16

解决方案1
0 已采纳 2021-06-11 02:32:27

解决方案2
0 2021-06-11 02:40:16