如果 Astro.js 获取失败 - 丢弃组件

Question

假设我有非常简单的 Astro 组件，它正在获取一些数据。

const data = await fetch("path-to-data.json").then((response) => response.json());
data.map(item => <h2>{item.title}</h2>)

如果我的数据获取失败，我会遇到错误：

Failed to parse URL from path-to-data.json

如果数据获取失败，我只想跳过这个“组件”，而不是破坏整个站点。

如何做到这一点？ （不是 React，不是 Vue.. 只是 Astro.js）

谢谢你

Answer 1

您可以将

await fetch

包装在

try/catch

块中，并且仅在成功获取数据时才渲染模板。

---
let data
try {
  data = await fetch("path-to-data.json").then((response) => response.json())
} catch {}
---

{data ? data.map(item => <h2>{item.title}</h2>) : null}