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 zurückgegebenen Text der Funktion in der Benutzeroberfläche mit CSS.)
    • PS: Müssen Sie einen SvelteKit-Entwickler einsetzen? Kontaktieren Sie mich

Über den #await-Block in Svelte

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

{#await data.myPromise}



{:then results}

{#each results as result}

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

Das ist im Grunde die Funktionsweise des #await-Blocks in Svelte. Je nach Status eines Versprechens 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 Toast).

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:

{#await data.myPromise}



{:then results}

{showSuccess(results.length)}

  
{#each results as result}

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

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.

Eines aber noch...

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. Etwas in der Art:

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.

{#await data.myPromise}
  


{:then results}

{showSuccess(results.length)} 


{#each results as result}

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

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

--- Oder ---

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

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

{#await data.myPromise}
  


{:then results}
 
  

{showSuccess(results.length)}



{#each results as result}