zoukankan      html  css  js  c++  java
  • [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>
  • 相关阅读:
    嵌入式
    IT 管理
    linux 网络编程 排序
    linux frameBuffer
    虚拟现实
    vc 串口
    OpenGLES 图像
    runloop
    归档
    商标查询
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10903054.html
Copyright © 2011-2022 走看看