数据获取

.astro 文件可以在构建时获取远程数据来辅助页面生成。

所有 Astro 组件 都可以在它们的组件脚本中通过全局 fetch() 函数来使用完整的 URL(例如 https://example.com/apiAstro.url + "/api")发起 API 请求。

fetch 调用将会在构建时执行,并且数据都可用于组件模板中来生成动态 HTML。如果启用 SSR 模式,任何 fetch 调用都将在运行时执行。

💡 在 Astro 组件 script 中使用顶层 await 的优势。

💡 将获取的数据作为参数传递给 Astro 和框架组件。

src/components/User.astro
---
import Contact from '../components/Contact.jsx';
import Location from '../components/Location.astro';
const response = await fetch('https://randomuser.me/api/');
const data = await response.json();
const randomUser = data.results[0]
---
<!-- 获取的数据可以在构建时在 HTML 中渲染 -->
<h1>User</h1>
<h2>{randomUser.name.first} {randomUser.name.last}</h2>
<!-- 获取的数据可以在构建时传递给组件作为参数 -->
<Contact client:load email={randomUser.email} />
<Location city={randomUser.location.city} />

在框架组件中使用 fetch()

标题部分 在框架组件中使用 fetch()

fetch() 函数也可在任何框架组件中全局使用:

src/components/Movies.tsx
import type { FunctionalComponent } from 'preact';
import { h } from 'preact';
const data = await fetch('https://example.com/movies.json').then((response) =>
response.json()
);
// 构建时渲染的组件也会输出日志到 CLI。
// 当用 client:* 指令渲染时,它们也会输出到浏览器控制台。
console.log(data);
const Movies: FunctionalComponent = () => {
// 将结果输出到页面上
return <div>{JSON.stringify(data)}</div>;
};
export default Movies;

Astro 也可以使用 fetch() 和任一有效的 GraphQL 查询来查询 GraphQL 服务器。

src/components/Film.astro
---
const response = await fetch("https://swapi-graphql.netlify.app/.netlify/functions/index",
{
method: 'POST',
headers: {'Content-Type':'application/json'},
body: JSON.stringify({
query: `
query getFilm ($id:ID!) {
film(id: $id) {
title
releaseDate
}
}
`,
variables: {
id: "ZmlsbXM6MQ==",
},
}),
});
const json = await response.json();
const { film } = json.data;
---
<h1>Fetching information about Star Wars: A New Hope</h1>
<h2>Title: {film.title}</h2>
<p>Year: {film.releaseDate}</p>

Astro 组件可以从你最喜欢的 CMS 中获取数据,然后将其呈现为页面内容。使用动态路由,组件甚至可以根据你的 CMS 内容生成页面。

请参阅 CMS 指南,查看有关将 Astro 与无头 CMS(包括 Storyblok、Contentful 和 WordPress)集成的完整详细信息。