await blocks

site/content/tutorial/04-logic/06-await-blocks/app-a/App.svelte

@@ -0,0 +1,25 @@
+<script>
+	let promise = getRandomNumber();
+
+	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 handleClick() {
+		promise = getRandomNumber();
+	}
+</script>
+
+<button on:click={handleClick}>
+	generate random number
+</button>
+
+<!-- replace this element -->
+<p>{promise}</p>

site/content/tutorial/04-logic/06-await-blocks/app-b/App.svelte

@@ -0,0 +1,30 @@
+<script>
+	let promise = getRandomNumber();
+
+	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 handleClick() {
+		promise = getRandomNumber();
+	}
+</script>
+
+<button on:click={handleClick}>
+	generate random number
+</button>
+
+{#await promise}
+	<p>...waiting</p>
+{:then number}
+	<p>The number is {number}</p>
+{:catch error}
+	<p style="color: red">{error.message}</p>
+{/await}

site/content/tutorial/04-logic/06-await-blocks/text.md

@@ -0,0 +1,25 @@
+---
+title: Await blocks
+---
+
+Most web applications have to deal with asynchronous data at some point. Svelte makes it easy to *await* the value of [promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises) directly in your markup:
+
+```html
+{#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:
+
+```html
+{#await promise then value}
+	<p>the value is {value}</p>
+{/await}
+```

site/content/tutorial/99-todo/99-todo/text.md

@@ -37,21 +37,21 @@ Another one should cover how to set up an editor for syntax highlighting.
 * [x] Statements
 
 
+## Props
+
+* [x] `export let foo`
+* [x] `export let foo = 1`
+* [x] spread props
+* [ ] `export function foo(){...}`
+
+
 ## Logic
 
 * [x] If blocks
 * [x] Else/elseif blocks
 * [x] Each blocks
 * [x] Keyed each blocks
-* [ ] Await blocks
+* [x] Await blocks
-
-
-## Props
-
-* [x] `export let foo`
-* [x] `export let foo = 1`
-* [ ] spread props
-* [ ] `export function foo(){...}`
 
 
 ## Events

site/src/routes/tutorial/random-number.js

@@ -0,0 +1,20 @@
+export function get(req, res) {
+	let { min = '0', max = '100' } = req.query;
+	min = +min;
+	max = +max;
+
+	res.setHeader('Access-Control-Allow-Origin', '*');
+
+	// simulate a long delay
+	setTimeout(() => {
+		// fail sometimes
+		if (Math.random() < 0.333) {
+			res.statusCode = 500;
+			res.end(`Failed to generate random number. Please try again`);
+			return;
+		}
+
+		const num = min + Math.round(Math.random() * (max - min));
+		res.end(String(num));
+	}, 1000);
+}