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}
이제 비동기 리소스에서 신호를 쉽게 생성할 수 있습니다! 언젠가는 $resource와 같은 Svelte에서 이와 같은 기능이 구현될 수 있기를 바랍니다.
데모: Vercel
저장소: GitHub
제이
위 내용은 Svelte 5의 비동기 가져오기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!