使用 HTML 显示来自 Fetch 的响应？

Question

我的目标是在网页上显示一些数据，这些数据是我使用 HTML 通过 Fetch 获得的。

我的 Fetch（有效）看起来像这样

<script>
  let response = fetch(
    "https://api.seatgeek.com/2/events?per_page=100&venue.city=boston&client_id=MYAPIKEY"
  )
    .then((response) => response.json())
    .then((response) => console.log(response.events[0].title));
</script>

代码有效，并按照我的要求向控制台记录响应。现在，我想在我的网页上显示一些回复。

我的尝试看起来像这样

<center><h2 id="response"></h2></center>    
<script>
      let response = fetch(
        "https://api.seatgeek.com/2/events?per_page=100&venue.city=boston&client_id=MYAPIKEY"
      )
        .then((response) => response.json())
        .then((response) => console.log(response.events[0].title))
        .then((response) => {
          document.getElementById("response").innerHTML = response.events[0].title;
        });
    </script>

上下文和详细信息：

我做过一些移动开发，但我是一个菜鸟，甚至连基本的 HTML/JS 网络交互都没有，所以我的知识有一些漏洞
我将在 Squarespace（Adirondack 模板，Adirondack 系列）上将此代码注入实现为代码块，但我认为 Squarespace 上下文无关紧要（Fetch 工作正常，并且代码注入具有一直在展示其他东西就好了）
我的尝试出错：VM22305 about:srcdoc:8 Uncaught (in promise) TypeError: Cannot read property 'events' of undefined
我不致力于任何特定的显示方式，我只是想通过在页面上看到一些东西来让球滚动

感谢您的帮助！

Answer 1

您的第二个 then 是控制台日志记录并且不返回任何内容（console.log returns undefined），因此在下一个 then 语句中 response 是 undefined.

将您的代码更改为：

<center><h2 id="response"></h2></center>    
<script>
      let response = fetch(
        "https://api.seatgeek.com/2/events?per_page=100&venue.city=boston&client_id=MYAPIKEY"
      )
        .then((response) => response.json())
        .then((response) => {
          console.log(response.events[0].title);
          return response;
        })
        .then((response) => {
          document.getElementById("response").innerHTML = response.events[0].title;
        });
</script>

它应该可以工作。

Answer 2

如果你想要一个 thens 链，你需要 return 对下一个的承诺，就像这样：

let response = fetch(
        "https://api.seatgeek.com/2/events?per_page=100&venue.city=boston&client_id=MYAPIKEY"
      )
        .then((response) => response.json())
        .then((response) => {
          document.getElementById("response").innerHTML = response.events[0].title;
        });

使用 HTML 显示来自 Fetch 的响应？

Display a response from a Fetch with HTML?

html

javascript

response

fetch-api