当你想在 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}
现在您可以轻松地从异步资源创建信号！我希望有一天像 $resource 这样的东西可以在 svelte 中实现。
演示： vercel
仓库： github
j
以上就是Svelte 5 中的异步获取的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
309
