Svelte 5 中的异步获取

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《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 中的异步获取》文章吧，也可关注golang学习网公众号了解相关技术文章。