diff --git a/site/content/tutorial/04-logic/06-await-blocks/app-a/App.svelte b/site/content/tutorial/04-logic/06-await-blocks/app-a/App.svelte new file mode 100644 index 0000000000..7ac5ca3c9e --- /dev/null +++ b/site/content/tutorial/04-logic/06-await-blocks/app-a/App.svelte @@ -0,0 +1,25 @@ + + + + + +

{promise}

\ No newline at end of file diff --git a/site/content/tutorial/04-logic/06-await-blocks/app-b/App.svelte b/site/content/tutorial/04-logic/06-await-blocks/app-b/App.svelte new file mode 100644 index 0000000000..8c8036c0f1 --- /dev/null +++ b/site/content/tutorial/04-logic/06-await-blocks/app-b/App.svelte @@ -0,0 +1,30 @@ + + + + +{#await promise} +

...waiting

+{:then number} +

The number is {number}

+{:catch error} +

{error.message}

+{/await} \ No newline at end of file diff --git a/site/content/tutorial/04-logic/06-await-blocks/text.md b/site/content/tutorial/04-logic/06-await-blocks/text.md new file mode 100644 index 0000000000..0d47dcde95 --- /dev/null +++ b/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} +

...waiting

+{:then number} +

The number is {number}

+{:catch error} +

{error.message}

+{/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} +

the value is {value}

+{/await} +``` \ No newline at end of file diff --git a/site/content/tutorial/99-todo/99-todo/text.md b/site/content/tutorial/99-todo/99-todo/text.md index 31baf93c8c..b9d949e11f 100644 --- a/site/content/tutorial/99-todo/99-todo/text.md +++ b/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 - - -## Props - -* [x] `export let foo` -* [x] `export let foo = 1` -* [ ] spread props -* [ ] `export function foo(){...}` +* [x] Await blocks ## Events diff --git a/site/src/routes/tutorial/random-number.js b/site/src/routes/tutorial/random-number.js new file mode 100644 index 0000000000..f864dff946 --- /dev/null +++ b/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); +} \ No newline at end of file