Question

我的目标是在通过HTML抓取获得的网页上显示一些数据。

“我的提取”（有效）如下所示：

<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返回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，则需要将一个promise返回到下一个，例如：

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抓取的响应？

2 个答案: