Svelte 5의 비동기 가져오기

Svelte에서 뭔가를 가져오고 싶을 때, 로드 함수에 넣는 방법을 추천합니다.

저는 비동기 가져오기와 이것이 로드 기능 외부에서 작동하는 데 왜 중요한지에 대한 기사를 썼습니다.

일반적으로 SSR이 포함되지 않으면 경쟁 조건, 오류 처리 및 로드 기능 외부 구현을 더 효과적으로 제어할 수 있습니다. 대부분의 상황에서는 로드 기능(SvelteKit 포함)을 사용해야 한다는 데 동의하지만 모든 상황에 해당되는 것은 아닙니다.

이를 처리하는 간단한 리소스 기능은 다음과 같습니다.

// resource.svelte.ts

export let resource = <T>(
    fn: () => Promise<T>,
    initialValue?: T
) => {

    const _rune = $state<{ value: T | undefined }>({
        value: initialValue
    });

    $effect(() => {
        fn().then((data) => {
            _rune.value = data;
        });
    });

    return _rune;
};

구성 요소에서 다음과 같이 사용합니다.

import { resource } from '$lib/resource.svelte';
...
const todo = resource<Todo>(() =>
  fetch(`https://jsonplaceholder.typicode.com/todos/${id}`)
    .then((response) => response.json())
);

다음을 사용하여 가치를 표시하세요.

{todo.value}

다른 프레임워크의 유사한 개념

• 반응 쿼리
• Vue 시청
• SolidJS createResource
• Qwik useResource$
• Angular 19 리소스
• ngxtension 파생Async

이제 비동기 리소스에서 신호를 쉽게 생성할 수 있습니다! 언젠가는 $resource와 같은 Svelte에서 이와 같은 기능이 구현될 수 있기를 바랍니다.

데모: Vercel
저장소: GitHub

제이

위 내용은 Svelte 5의 비동기 가져오기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!