Skip to main content

Most web applications have to deal with asynchronous data at some point. Svelte makes it easy to await the value of promises directly in your markup:

{#await promise}
	<p>...waiting</p>
{:then number}
	<p>The number is {number}</p>
{:catch error}
	<p style="color: red">{error.message}</p>
{/await}

Only the most recent promise is considered, meaning you don't need to worry about race conditions.

If you know that your promise can't reject, you can omit the catch block. You can also omit the first block if you don't want to show anything until the promise resolves:

{#await promise then number}
	<p>the number is {number}</p>
{/await}
Edit this chapter
App.svelte
<script>
async function getRandomNumber() {
const res = await fetch(`/tutorial/random-number`);
const text = await res.text();

if (res.ok) {
return text;
} else {
throw new Error(text);
}
}

let promise = getRandomNumber();

function handleClick() {
promise = getRandomNumber();
}
</script>

<button on:click={handleClick}> generate random number </button>

<!-- replace this element -->
<p>{promise}</p>

fetching https://unpkg.com/svelte@4/src/runtime/internal/disclose-version/index.js
/* App.svelte generated by Svelte v4.2.19 */
import {
SvelteComponent,
append,
detach,
element,
init,
insert,
listen,
noop,
safe_not_equal,
set_data,
space,
text
} from "svelte/internal";

import "svelte/internal/disclose-version";

function create_fragment(ctx) {
let button;
let t1;
let p;
let t2;
let mounted;
let dispose;

return {
c() {
button = element("button");
button.textContent = "generate random number";
t1 = space();
p = element("p");
t2 = text(/*promise*/ ctx[0]);
},
m(target, anchor) {
insert(target, button, anchor);
insert(target, t1, anchor);
insert(target, p, anchor);
append(p, t2);

if (!mounted) {
dispose = listen(button, "click", /*handleClick*/ ctx[1]);
mounted = true;
}
},
p(ctx, [dirty]) {
if (dirty & /*promise*/ 1) set_data(t2, /*promise*/ ctx[0]);
},
i: noop,
o: noop,
d(detaching) {
if (detaching) {
detach(button);
detach(t1);
detach(p);
}

mounted = false;
dispose();
}
};
}

async function getRandomNumber() {
const res = await fetch(`/tutorial/random-number`);
const text = await res.text();

if (res.ok) {
return text;
} else {
throw new Error(text);
}
}

function instance($$self, $$props, $$invalidate) {
let promise = getRandomNumber();

function handleClick() {
$$invalidate(0, promise = getRandomNumber());
}

return [promise, handleClick];
}

class App extends SvelteComponent {
constructor(options) {
super();
init(this, options, instance, create_fragment, safe_not_equal, {});
}
}

export default App;
result = svelte.compile(source, {
generate:
css:
});
/* Add a <style> tag to see compiled CSS */