mirror of
https://github.com/withastro/astro.git
synced 2024-12-23 21:53:55 -05:00
942 B
942 B
| layout | title |
|---|---|
| ~/layouts/Main.astro | Data Fetching |
Astro support fetch() and "top-level await" to help you do remote data fetching inside of your page. See the "Data Loading" Pages section for more info.
Important: These are not yet available inside of non-page Astro components. Instead, do all of your data loading inside of your pages, and then pass them to your components as props.
Example
// Example: src/pages/foo.astro
// top-level `fetch()` and `await` are both supported natively in Astro (pages only).
const allPokemonResponse = await fetch(`https://pokeapi.co/api/v2/pokemon?limit=150`);
const allPokemonResult = await allPokemonResponse.json();
const allPokemon = allPokemonResult.results;
---
<html lang="en">
<head>
<title>Original 150 Pokemon</head>
<body>
{allPokemon.map((pokemon) => (<h1>{pokemon.name}</h1>))}
</body>
</html>