Skip To Content:

• About the #await block in svelte
• Run (trigger) a function when the #await block resolves or rejects
• Fix undefined or any returned text showing up in browser
  • 1. Method 1 (Return empty strings):
  • 2. Method 2 (Hide the returned text from the function in the UI with CSS.)
    • PS: Need to employ a SvelteKit Dev? Contact me

About the #await block in svelte

The #await block in svelte is very handy for handling asynchronous data:

{#await data.myPromise}



{:then results}

{#each results as result}

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

This is basically how the #await block works in svelte. It displays different content based on the state of a promise: a loading indicator while pending, results when resolved, and an error message if rejected.

But let's say I want a certain function to run when the promise has been resolved or rejected (like a toast).

Run (trigger) a function when the #await block resolves or rejects

Here's how you can run specific functions when the promise resolves or rejects:

{#await data.myPromise}



{:then results}

{showSuccess(results.length)}

  
{#each results as result}

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

Now, our function will run whenever the code block is reached.

• showSuccess is called when the promise resolves, with the number of results as an argument.
• showError is triggered if the promise rejects, displaying a custom error message.

One more thing though...

Fix undefined or any returned text showing up in browser

When these functions run, whatever is returned text will show up in the browser, because it's kind of a workaround. The syntax we used is usually to meant to show returned strings/numbers in the browser. Even returning nothing will return the default undefined. And this string (which usually make no sense), will be displayed to the end user. Something like this:

Makes no sense to the end user ?‍♂️?‍♀️

So, make sure to return empty strings, or wrap the function in an hidden block:

1. Method 1 (Return empty strings):

In this method, we'll make sure to return empty strings from our functions.

{#await data.myPromise}
  


{:then results}

{showSuccess(results.length)} 


{#each results as result}

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

This will make sure empty strings are returned.

--- Or ---

2. Method 2 (Hide the returned text from the function in the UI with CSS.)

In this method, we'll hide the function block in the UI instead, so the text returned is hidden from the user's sight.

{#await data.myPromise}
  


{:then results}
 
  

{showSuccess(results.length)}



{#each results as result}