/

從網絡中擷取資料在Astro上

從網絡中擷取資料在Astro上

我非常喜歡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：

1
2
3
4
5
6
7
8
9
---
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在各個平台上實現。