[Svelte 3] Use an onMount lifecycle method to fetch and render data in Svelte 3

Every Svelte component has a lifecycle that starts when it is created, and ends when it is destroyed. There are a handful of functions that allow you to run code at key moments during that lifecycle.

The one you'll use most frequently is onMount, which runs after the component is first rendered to the DOM.

In this lesson we're going to learn how to use onMount to fetch and render data from Star Wars API.

Doc: https://svelte.dev/docs#onMount

 

<script>
    import {onMount} from 'svelte';
    let people = []
    onMount(async () => {
        const response = await fetch('https://swapi.co/api/people/');
        const json = await response.json();
        people = json.results;

        return () => console.log('Destroyed');
    })
</script>

<ul>
    {#each people as {name, height, birth_year}}
        <li>
            <strong>{name}</strong>
            (height: {height}cm, birth year: {birth_year})
        </li>
    {:else}
        <p>loading...</p>
    {/each}
</ul>