--- layout: ~/layouts/MainLayout.astro title: Data Fetching description: Learn how to fetch remote data with Astro using the fetch API. --- Astro components and pages can fetch remote data to help generate your pages. Astro provides two different tools to pages to help you do this: **fetch()** and **top-level await.** ## `fetch()` Astro pages have access to the global `fetch()` function in their setup script. `fetch()` is a native JavaScript API ([MDN- fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)) that lets you make HTTP requests for things like APIs and resources. Even though Astro component scripts run inside of Node.js (and not in the browser) Astro provides this native API so that you can fetch data at page build time. ```astro --- // Movies.astro const response = await fetch('https://example.com/movies.json'); const data = await response.json(); // Remember: Astro component scripts log to the CLI console.log(data); ---
{JSON.stringify(data)}
``` ## Top-level await `await` is another native JavaScript feature that lets you await the response of some asynchronous promise ([MDN- await](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await)). Astro supports `await` in the top-level of your component script. **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. ## Using `fetch()` outside of Astro Components If you want to use `fetch()` in a non-astro component, it is also globally available: ```tsx // Movies.tsx import type { FunctionalComponent } from 'preact'; import { h } from 'preact'; const data = fetch('https://example.com/movies.json').then((response) => response.json() ); // Components that are build-time rendered also log to the CLI. // If you loaded this component with a directive, it would log to the browser console. console.log(data); const Movies: FunctionalComponent = () => { // Output the result to the page return
{JSON.stringify(data)}
; }; export default Movies; ``` option> Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
path: root/examples/framework-svelte/astro.config.mjs (unfollow)
AgeCommit message (Collapse)AuthorFilesLines
2021-10-14Expose Vue component names for devtools (#1512)Gravatar Levi 3-3/+10
* Expose name on host component for Vue devtools * Add changeset * Update changeset to patch from minor * [ci] collect stats * [ci] collect stats Co-authored-by: leviceccato <leviceccato@users.noreply.github.com> Co-authored-by: Matthew Phillips <matthew@matthewphillips.info>
2021-10-14Fix type error in blog-multiple-authors example (#1553)Gravatar Yoshiaki Togami 4-4/+9
* chore: add description to avoid type error * fix: fix canonical url type in main head component
2021-10-14Add Vercel sponsorship logo (#1555)Gravatar Drew Powers 8-48/+60
* Add Vercel sponsorship logo Also normalize other logos * Add Vercel logo to www * Add logos to docs
2021-10-14Include pnpm example on "Installation" page (#1554)Gravatar Henrique Borges 1-0/+5
2021-10-14Added descriptions to docs pages (#1550)Gravatar AsyncBanana 22-8/+28
2021-10-14Only run `.github/workflows/stats.yml` locally, not on forks (#1549)Gravatar Caleb Jasik 1-0/+1
2021-10-14[ci] collect statsGravatar FredKSchott 1-0/+1
2021-10-13Add Community Themes and separate Featured Theme (#1543)Gravatar Mark Teekman 2-8/+30
* Separate object for featured and community themes I've split up the two so there's the featured one at the top at the page and community ones below the official themes * Add community themes and change featured themes * Add comma after featured object
2021-10-13Change publish date el to be more accessible (#1522)Gravatar AsyncBanana 2-2/+2
2021-10-13[ci] yarn formatGravatar matthewp 1-1/+1
2021-10-13docs: unify concepts in Spanish version (#1545)Gravatar Jorge del Casar 6-11/+11
2021-10-13[ci] yarn formatGravatar matthewp 1-1/+1