astro/docs/guides/data-fetching.md

---
layout: ~/layouts/Main.astro
title: 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](/docs/core-concepts/astro-pages.md#data-loading) 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

```astro
// 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>
```
astro-docs sync 2021-06-28 06:27:12 +00:00			`---`
			`layout: ~/layouts/Main.astro`
			`title: 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](/docs/core-concepts/astro-pages.md#data-loading) 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`
[ci] yarn format 2021-07-07 20:10:09 +00:00
astro-docs sync 2021-06-28 06:27:12 +00:00			```astro
			`// 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>`
[ci] yarn format 2021-07-07 20:10:09 +00:00			```