Récupération asynchrone dans Svelte 5

Lorsque vous souhaitez récupérer quelque chose dans Svelte, la méthode recommandée est de le mettre dans la fonction de chargement.

J'ai écrit un article sur la récupération asynchrone et pourquoi cela pourrait être important de travailler en dehors de la fonction de chargement.

De manière générale, lorsque SSR n'est pas impliqué, vous avez un meilleur contrôle des conditions de concurrence, de la gestion des erreurs et de la mise en œuvre en dehors de la fonction de chargement. Bien que je sois d'accord dans la PLUPART des situations, vous devriez utiliser les fonctions de chargement (avec SvelteKit), ce n'est pas vrai pour TOUTES les situations.

Voici une fonction de ressource simple pour gérer cela :

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

Et vous l'utiliseriez ainsi dans votre composant :

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

Et affichez la valeur avec :

{todo.value}

Concepts similaires dans d'autres cadres

• Réagir à la requête
• Montre Vue
• SolidJS créerResource
• Qwik useResource$
• Ressource angulaire 19
• ngxtension dérivéAsync

Vous pouvez désormais facilement créer un signal à partir d'une ressource asynchrone ! J'espère que quelque chose comme ça pourra être implémenté dans Svelte comme $resource un jour.

Démo : Vercel
Repo : GitHub

J

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!