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}

其他框架中的類似概念

• 反應查詢
• Vue 手錶
• SolidJS createResource
• Qwik useResource$
• Angular 19 資源
• ngxtension衍生非同步

現在您可以輕鬆地從非同步資源建立訊號！我希望有一天像 $resource 這樣的東西可以在 Svelte 中實現。

示範： Vercel
倉庫： GitHub

J

以上是Svelte 5 中的非同步獲取的詳細內容。更多資訊請關注PHP中文網其他相關文章！