我非常喜歡Astro的frontmatter。
我們可以在其中放置任何JavaScript,而其中最有用的功能之一就是在構建時擷取資料。
我們可以使用fetch()
或者Fetch API來實現擷取。
Astro的好處是它支援在frontmatter中使用top-level await,因此我們不需要像使用IIFE([立即執行函式](https://zh.wikipedia.org/wiki/%E5%8D%B3%E6%99%82%E5%87%BD%E5%BC%8F%E8%A1%A8%E7%A4%BA%EF%BC%89))或者調用async function來使用fetch(),因為fetch是一個基於promise的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在各個平台上實現。