Перейти к содержимому

Получение данных

Файлы .astro могут получать удаленные данные, чтобы помочь вам генерировать страницы.

Все компоненты Astro имеют доступ к глобальной функции fetch() в скрипте своего компонента для выполнения HTTP-запросов к API с использованием полного URL (например, https://example.com/api или Astro.url + "/api").

Этот запрос fetch будет выполнен во время сборки, и данные будут доступны шаблону компонента для генерации динамического HTML. Если включен режим SSR, любые запросы fetch будут выполняться во время выполнения.

💡 Воспользуйтесь преимуществом await верхнего уровня внутри скрипта вашего Astro компонента.

💡 Передавайте полученные данные как компонентам 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() также глобально доступна для любого компонента фреймворка:

src/components/Movies.tsx
import type { FunctionalComponent } 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.