如何在Astro中从网络中获取数据

我非常喜欢Astro的一件事是前面板。

我们可以把任何JavaScript放在那里，而我们可以做的最有用的事情之一是在构建时获取数据。

我们使用fetch() ，即Fetch API来做这件事。

Astro的好处是，它使得在前言中使用顶层等待成为可能，所以我们不必做任何花哨的事情，如IIFE或调用一个异步函数来使用fetch()，这是一个基于承诺的API。

换句话说，你可以直接使用await 。

---
const res = await fetch('https://api.sampleapis.com/coffee/hot')
const data = await res.json()
---
<ul>
  {data.map(item => (
    <li>{item.title}</li>
  ))}
</ul>

值得一提的是，这个网络请求是在构建时进行的，所以在网站部署时只需做一次。

当然，当它再次被部署时也是如此。

因此，任何时候我们在API中做了改变，如果你想让网站显示新的数据，你必须触发重建，这是所有平台通过webhooks提供的东西。