Asynchroner Abruf in Svelte 5

Wenn Sie etwas in Svelte abrufen möchten, empfiehlt es sich, es in die Ladefunktion einzufügen.

Ich habe einen Artikel über asynchrones Abrufen geschrieben und warum dies wichtig sein könnte, um außerhalb der Ladefunktion zu funktionieren.

Wenn SSR nicht beteiligt ist, haben Sie im Allgemeinen eine bessere Kontrolle über die Rennbedingungen, die Fehlerbehandlung und die Implementierung außerhalb der Ladefunktion. Obwohl ich der Meinung bin, dass Sie in den MEISTEN Situationen die Ladefunktionen (mit SvelteKit) verwenden sollten, gilt dies nicht für ALLE Situationen.

Hier ist eine einfache Ressourcenfunktion, um damit umzugehen:

// 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;
};

Und Sie würden es in Ihrer Komponente folgendermaßen verwenden:

import { resource } from '$lib/resource.svelte';
...
const todo = resource<Todo>(() =>
  fetch(`https://jsonplaceholder.typicode.com/todos/${id}`)
    .then((response) => response.json())
);

Und zeigen Sie den Wert an mit:

{todo.value}

Ähnliche Konzepte in anderen Frameworks

• Abfrage reagieren
• Vue-Uhr
• SolidJS createResource
• Qwik useResource$
• Angular 19-Ressource
• ngxtension derivativeAsync

Jetzt können Sie ganz einfach ein Signal aus einer asynchronen Ressource erstellen! Ich hoffe, dass so etwas eines Tages in Svelte wie $resource implementiert werden kann.

Demo:Vercel
Repo:GitHub

J

Das obige ist der detaillierte Inhalt vonAsynchroner Abruf in Svelte 5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!