Svelte 5 での非同期フェッチ

Svelte で何かを取得したい場合、推奨される方法はそれをload 関数に入れることです。

非同期フェッチと、これがロード関数の外で動作するためになぜ重要であるかについての記事を書きました。

一般的に言えば、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}

他のフレームワークにおける同様の概念

• クエリに反応
• ビューウォッチ
• SolidJS createResource
• Qwik useResource$
• Angular 19 リソース
• ngxtension由来Async

非同期リソースからシグナルを簡単に作成できるようになりました。いつかこのようなものが $resource のように Svelte に実装されることを願っています。

デモ: Vercel
リポジトリ: GitHub

J

以上がSvelte 5 での非同期フェッチの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。