Passer au contenu :

• À propos du bloc #await dans svelte
• Exécuter (déclencher) une fonction lorsque le bloc #await est résolu ou rejeté
• Correction d'un texte non défini ou renvoyé apparaissant dans le navigateur
  • 1. Méthode 1 (Renvoyer les chaînes vides) :
  • 2. Méthode 2 (Masquer le texte renvoyé par la fonction dans l'interface utilisateur avec CSS.)
    • PS : Besoin d'employer un développeur SvelteKit ? Contactez-moi

À propos du bloc #await dans svelte

Le bloc #await dans svelte est très pratique pour gérer des données asynchrones :

{#await data.myPromise}



{:then results}

{#each results as result}

{error?.message ?? "Something went wrong"}

C'est essentiellement ainsi que le bloc #await fonctionne en svelte. Il affiche un contenu différent en fonction de l'état d'une promesse : un indicateur de chargement en attente, des résultats une fois résolus et un message d'erreur en cas de rejet.

Mais disons que je souhaite qu'une certaine fonction s'exécute lorsque la promesse a été résolue ou rejetée (comme un toast).

Exécuter (déclencher) une fonction lorsque le bloc #await est résolu ou rejeté

Voici comment exécuter des fonctions spécifiques lorsque la promesse est résolue ou rejetée :

{#await data.myPromise}



{:then results}

{showSuccess(results.length)}

  
{#each results as result}

{error?.message ?? "Something went wrong"}

Maintenant, notre fonction s'exécutera chaque fois que le bloc de code sera atteint.

• showSuccess est appelé lorsque la promesse est résolue, avec le nombre de résultats comme argument.
• showError est déclenché si la promesse est rejetée, affichant un message d'erreur personnalisé.

Encore une chose cependant...

Correction d'un texte non défini ou renvoyé apparaissant dans le navigateur

Lorsque ces fonctions sont exécutées, le texte renvoyé apparaîtra dans le navigateur, car il s'agit en quelque sorte d'une solution de contournement. La syntaxe que nous avons utilisée est généralement destinée à afficher les chaînes/nombres renvoyés dans le navigateur. Même en ne renvoyant rien, la valeur par défaut sera indéfinie. Et cette chaîne (qui n'a généralement aucun sens) sera affichée à l'utilisateur final. Quelque chose comme ça :

Cela n'a aucun sens pour l'utilisateur final ?‍♂️?‍♀️

Alors, assurez-vous de renvoyer des chaînes vides ou d'envelopper la fonction dans un bloc caché :

1. Méthode 1 (Renvoyer les chaînes vides) :

Dans cette méthode, nous veillerons à renvoyer les chaînes vides de nos fonctions.

{#await data.myPromise}
  


{:then results}

{showSuccess(results.length)} 


{#each results as result}

{error?.message ?? "Something went wrong"}

Cela garantira que les chaînes vides sont renvoyées.

--- Ou ---

2. Méthode 2 (Masquer le texte renvoyé par la fonction dans l'interface utilisateur avec CSS.)

Dans cette méthode, nous masquerons plutôt le bloc fonctionnel dans l'interface utilisateur, afin que le texte renvoyé soit caché à la vue de l'utilisateur.

{#await data.myPromise}
  


{:then results}
 
  

{showSuccess(results.length)}



{#each results as result}