Exécuter une fonction lorsqu'un bloc #await est résolu dans Svelte (Kit)

Passer au contenu :

• À propos du bloc #await en 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 :

<script>
import Loader from "$components/forms/Helpers/Loader.svelte";

export let data;
// let's say data.myPromise is a promise.
</script>

{#await data.myPromise}
<!-- This is what shows while the promise is pending -->
<Loader />

{:then results}
<!-- Shows this if/when the promise resolves successfully -->
{#each results as result}
<li>{result}</li>
{/each}

{:catch error}
<!-- Shows this if/when the promise rejects -->
<p class="text-red">{error?.message ?? "Something went wrong"}</p>
{/await}

C'est essentiellement ainsi que fonctionne le bloc #await dans svelte. Il affiche différents contenus 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 veux 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 :

<script>
import { toast } from "svelte-sonner";

/**
* Displays a success toast
* @param {number | string} resultsLength - Number of results
*/
function showSuccess (resultsLength) {
toast.success(`${resultsLength} result${resultsLength > 1 ? "s" : ""} retrieved!`)
}

/**
* Displays an error toast
* @param {string} [errorMessage] - Error message to display
*/
function showError(errorMessage) {
toast.error(`An Error Occured`, {
message: errorMessage ?? "Unknown Error"
})
}

</script>

{#await data.myPromise}
<!-- Displays while the promise is pending -->
<Loader />

{:then results}
<!-- Run showSuccess when the promise resolves -->
{showSuccess(results.length)}

  <!-- Display results -->
{#each results as result}
<li>{result}</li>
{/each}

{:catch error}
<!-- Run (trigger) showError when the promise rejects -->
{showError(error.message)}

  <!-- Display error message -->
<p class="text-red">{error?.message ?? "Something went wrong"}</p>
{/await}

Désormais, 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.

<script>
import { toast } from "svelte-sonner";

/**
* @param {number | string} resultsLength
* @returns {string} - Empty string to avoid display issues
*/
function showSuccess (resultsLength) {
toast.success(`${resultsLength} result${resultsLength > 1 ? "s" : ""} retrieved!`)
return ""; // Return an empty string
}

/**
* @param {string} [errorMessage]
* @returns {string} - Empty string to avoid display issues
*/
function showError(errorMessage) {
toast.error(`An Error Occured`, {
message: errorMessage ?? "Unknown Error"
})
return ""; // Return an empty string
}

</script>

{#await data.myPromise}
  <!-- Display this while the promise is pending -->
<Loader />

{:then results}
<!-- Run showSuccess -->
{showSuccess(results.length)} <!-- Won't render any text in the UI -->

<!-- This shows if/when the promise is resolved -->
{#each results as result}
<li>{result}</li>
{/each}

{:catch error}
<!-- Run showError -->
{showError(error.message)} <!-- Won't render any text in the UI -->

<!-- This shows if/when the promise is rejected -->
<p class="text-red">{error?.message ?? "Something went wrong"}</p>
{/await}

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.

<script>
import { toast } from "svelte-sonner";

/**
* @param {number | string} resultsLength
*/
function showSuccess (resultsLength) {
toast.success(`${resultsLength} result${resultsLength > 1 ? "s" : ""} retrieved!`)
// No explicit return necessary. Returns undefined by default
}

/**
* @param {string} [errorMessage]
* @returns {string}
*/
function showError(errorMessage) {
toast.error(`An Error Occured`, {
message: errorMessage ?? "Unknown Error"
})
// No explicit return necessary. Returns undefined by default
}

</script>

{#await data.myPromise}
  <!-- Display this while the promise is pending -->
<Loader />

{:then results}
<div class="hidden"> <!-- Hide the function block -->
  <!-- Display results -->

{showSuccess(results.length)}
</div>

<!-- This shows if/when the promise is resolved -->
{#each results as result}
<li>{result}</li>
{/each}

{:catch error}
<div class="hidden"><!-- Hide the function call -->
{showError(error.message)}
<div>

<!-- This shows if/when the promise is rejected -->
<p class="text-red">{error?.message ?? "Something went wrong"}</p>
{/await}

<style>
  .hidden {
    display: none;
  }
</style>

Cette méthode basée sur CSS garantira que le texte renvoyé est caché à la vue.

HeureuxHacking

PS : Besoin d'employer un développeur SvelteKit ? Contactez-moi

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!