Sapper/Svelte - 주기적으로 가져오는 방법

Sapper/Svelte - 주기적으로 가져오는 방법

Sapper를 사용하여 주기적으로 데이터를 가져오려면 어떻게 해야 합니까?

이 방법이 맞나요?

//src/routes/fetch_on_this_page.svelte

<script>
  setInterval(async () => {
    //fetch here
  }, 3000);
</script>

---

<script>
  import { onMount, onDestroy } from "svelte";

  async function fetchData() {
  //Fetch
  }

  const interval = setInterval(async () => {
    fetchData();
  }, 3000);

  onMount(async () => {
    fetchData();
  });

  onDestroy(() => clearInterval(interval));
</script>

https://svelte.dev/message/ondestroy

---

가장 깔끔한 방법은 내부에서 모두 수행하는 것입니다:

<script>
  import { onMount } from 'svelte';

  onMount(() => {
    async function fetchData() {...}
    
    const interval = setInterval(fetchData, 3000);
    fetchData();

    return () => clearInterval(interval);
  });
</script>

구성 요소 수준 변수를 적게 만드는 것 외에도 서버 측 렌더링 중에 코드가 실행되지 않으므로 작업이 더 적게 필요합니다. 여러 구성 요소에서 이 작업을 수행해야 하는 경우 이 작업을 사용자 정의 수명 주기 기능으로 마무리할 수도 있습니다:

// poll.js
import { onMount } from 'svelte';

export function poll(fn, ms) {
  onMount(() => {
    const interval = setInterval(fn, ms);
    fn();

    return () => clearInterval(interval);
  });
}

<script>
  import { poll } from './poll.js';

  poll(async function fetchData() {
    // your implementation goes here
  }, 3000);
</script>