Ausführen einer Funktion, wenn ein #await-Block in Svelte(Kit) aufgelöst wird

Zum Inhalt springen:

• Über den #await-Block in Svelte
• Eine Funktion ausführen (auslösen), wenn der #await-Block aufgelöst oder abgelehnt wird
• Korrigieren Sie undefinierten oder zurückgegebenen Text, der im Browser angezeigt wird
  • 1. Methode 1 (Leere Zeichenfolgen zurückgeben):
  • 2. Methode 2 (Verstecken Sie den von der Funktion zurückgegebenen Text in der Benutzeroberfläche mit CSS.)
    • PS: Müssen Sie einen SvelteKit-Entwickler beschäftigen? Kontaktieren Sie mich

---

Über den #await-Block in Svelte

Der #await-Block in Svelte ist sehr praktisch für die Verarbeitung asynchroner Daten:

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

So funktioniert im Grunde der #await-Block in Svelte. Je nach Status einer Zusage werden unterschiedliche Inhalte angezeigt: eine Ladeanzeige, wenn sie aussteht, Ergebnisse, wenn sie gelöst wird, und eine Fehlermeldung, wenn sie abgelehnt wird.

Aber nehmen wir an, ich möchte, dass eine bestimmte Funktion ausgeführt wird, wenn das Versprechen gelöst oder abgelehnt wurde (wie ein Trinkspruch).

---

Führen Sie eine Funktion aus (triggern Sie sie aus), wenn der #await-Block aufgelöst oder abgelehnt wird

So können Sie bestimmte Funktionen ausführen, wenn das Versprechen aufgelöst oder abgelehnt wird:

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

Jetzt wird unsere Funktion immer dann ausgeführt, wenn der Codeblock erreicht wird.

• showSuccess wird aufgerufen, wenn das Versprechen aufgelöst wird, mit der Anzahl der Ergebnisse als Argument.
• showError wird ausgelöst, wenn das Versprechen abgelehnt wird, und zeigt eine benutzerdefinierte Fehlermeldung an.

---

Aber noch etwas...

Korrigieren Sie undefinierten oder zurückgegebenen Text, der im Browser angezeigt wird

Wenn diese Funktionen ausgeführt werden, wird der zurückgegebene Text im Browser angezeigt, da dies eine Art Problemumgehung darstellt. Die von uns verwendete Syntax dient normalerweise dazu, zurückgegebene Zeichenfolgen/Zahlen im Browser anzuzeigen. Selbst wenn Sie nichts zurückgeben, wird die Standardeinstellung undefiniert zurückgegeben. Und diese Zeichenfolge (die normalerweise keinen Sinn ergibt) wird dem Endbenutzer angezeigt. Etwa so:

Macht für den Endbenutzer keinen Sinn ?‍♂️?‍♀️

Stellen Sie also sicher, dass Sie leere Zeichenfolgen zurückgeben, oder schließen Sie die Funktion in einen versteckten Block ein:

1. Methode 1 (Leere Zeichenfolgen zurückgeben):

Bei dieser Methode stellen wir sicher, dass unsere Funktionen leere Zeichenfolgen zurückgeben.

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

Dadurch wird sichergestellt, dass leere Zeichenfolgen zurückgegeben werden.

--- Oder ---

2. Methode 2 (Verstecken Sie den von der Funktion zurückgegebenen Text in der Benutzeroberfläche mit CSS.)

Bei dieser Methode verstecken wir stattdessen den Funktionsblock in der Benutzeroberfläche, sodass der zurückgegebene Text für den Benutzer nicht sichtbar ist.

<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>

Diese CSS-basierte Methode stellt sicher, dass der zurückgegebene Text nicht sichtbar ist.

Viel Spaß beim Hacken

PS: Müssen Sie einen SvelteKit-Entwickler einsetzen? Kontaktieren Sie mich

Das obige ist der detaillierte Inhalt vonAusführen einer Funktion, wenn ein #await-Block in Svelte(Kit) aufgelöst wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!