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中文网其他相关文章！