Спросите свой вопрос и получите сводку документа, используя эту страницу и выбранного вами поставщика AI
Содержимое этой страницы было переведено с помощью ИИ.
Смотреть последнюю версию оригинального контента на английскомЕсли у вас есть идея по улучшению этой документации, не стесняйтесь внести свой вклад, подав запрос на вытягивание на GitHub.
Ссылка на документацию GitHubКопировать Markdown документа в буфер обмена
Файлы .astro могут получать удаленные данные, чтобы помочь вам генерировать страницы.
fetch() в Astro
Все компоненты Astro имеют доступ к глобальной функции fetch() в скрипте своего компонента для выполнения HTTP-запросов к API с использованием полного URL (например, https://example.com/api или Astro.url + "/api").
Этот запрос fetch будет выполнен во время сборки, и данные будут доступны шаблону компонента для генерации динамического HTML. Если включен режим SSR, любые запросы fetch будут выполняться во время выполнения.
💡 Воспользуйтесь преимуществом await верхнего уровня внутри скрипта вашего Astro компонента.
💡 Передавайте полученные данные как компонентам Astro, так и компонентам фреймворка в виде пропсов.
Копировать код в буфер обмена
---// src/components/User.astroimport 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} />:::note Помните, что Astro компоненты получают данные когда они рендерятся.
Ваш развернутый сайт Astro будет получать данные один раз, во время сборки. Во время разработки вы увидите запросы данных при обновлении компонента. Если вам нужно обновлять данные несколько раз на стороне клиента, используйте компоненты фреймворка или клиентские скрипты в компоненте Astro. :::
fetch() в компонентах фреймворка
Функция fetch() также глобально доступна для любого компонента фреймворка:
Копировать код в буфер обмена
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;Запросы на GraphQL
Astro также может использовать fetch() для запроса к GraphQL-серверу с любым корректным GraphQL-запросом.
Копировать код в буфер обмена
---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>Получение данных из безголовой CMS
Компоненты Astro могут получать данные из вашей любимой CMS и затем отображать их в качестве содержимого страницы. Используя динамические маршруты, компоненты могут даже генерировать страницы на основе содержимого вашей CMS.
Посмотрите наши Руководства по CMS для получения подробной информации об интеграции Astro с безголовыми CMS, включая Storyblok, Contentful и WordPress.