tidy up await block example

Author: Rich Harris

content/tutorial/01-svelte/04-logic/06-await-blocks/README.md

@@ -6,21 +6,21 @@ Most web applications have to deal with asynchronous data at some point. Svelte
 
 ```svelte
 /// file: App.svelte
-{#await promise}
++++{#await promise}+++
 	<p>...waiting</p>
-{:then number}
++++{:then number}
 	<p>The number is {number}</p>
 {:catch error}
 	<p style="color: red">{error.message}</p>
-{/await}
+{/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:
 
 ```svelte
-/// file: App.svelte
+/// no-file
 {#await promise then number}
 	<p>The number is {number}</p>
 {/await}

content/tutorial/01-svelte/04-logic/06-await-blocks/app-a/src/lib/App.svelte

@@ -1,16 +1,5 @@
 <script>
-	async function getRandomNumber() {
-		// Fetch a random number between 0 and 100
-		// (with a delay, so that we can see it)
-		const res = await fetch('/random-number');
-
-		if (res.ok) {
-			return await res.text();
-		} else {
-			// Sometimes the API will fail!
-			throw new Error('Request failed');
-		}
-	}
+	import { getRandomNumber } from './utils.js';
 
 	let promise = getRandomNumber();
 
@@ -23,5 +12,4 @@
 	generate random number
 </button>
 
-<!-- replace this element -->
-<p>{promise}</p>
+<p>...waiting</p>

content/tutorial/01-svelte/04-logic/06-await-blocks/app-a/src/lib/utils.js

@@ -0,0 +1,12 @@
+export async function getRandomNumber() {
+    // Fetch a random number between 0 and 100
+    // (with a delay, so that we can see it)
+    const res = await fetch('/random-number');
+
+    if (res.ok) {
+        return await res.text();
+    } else {
+        // Sometimes the API will fail!
+        throw new Error('Request failed');
+    }
+}

content/tutorial/01-svelte/04-logic/06-await-blocks/app-b/src/lib/App.svelte

@@ -1,16 +1,5 @@
 <script>
-	async function getRandomNumber() {
-		// Fetch a random number between 0 and 100
-		// (with a delay, so that we can see it)
-		const res = await fetch('/random-number');
-
-		if (res.ok) {
-			return await res.text();
-		} else {
-			// Sometimes the API will fail!
-			throw new Error('Request failed');
-		}
-	}
+	import { getRandomNumber } from './utils.js';
 
 	let promise = getRandomNumber();