Most web applications have to deal with asynchronous data at some point.
Svelte 3 apps are no different, luckily Svelte allows us to await the value of a promise directly in markup using await block.
In this lesson we‘re going to learn how to use the await block to fetch the data from a Star Wars API and both display the data and handle loading state.
// Before: <script> async function getRandomStarWarsCharacter() { const randomNumber = Math.floor(Math.random() * 10) + 1; const apiResponse = await fetch( `https://swapi.co/api/people/${randomNumber}/` ); return await apiResponse.json(); } let character; getRandomStarWarsCharacter().then(value => (character = value)); </script> <h1>{!character ? ‘Loading ...‘ : character.name}</h1>
// After: <script> async function getRandomStarWarsCharacter() { const randomNumber = Math.floor(Math.random() * 10) + 1; const apiResponse = await fetch( `https://swapi.co/api/people/${randomNumber}/` ); return await apiResponse.json(); } let promise = getRandomStarWarsCharacter(); </script> <!-- <h1>{!character ? ‘Loading ...‘ : character.name}</h1> --> {#await promise} <h1>Loading...</h1> {:then character} <h1>{character.name}</h1> {/await}
[Svelte 3] Use await block to wait for a promise and handle loading state in Svelte 3
原文：https://www.cnblogs.com/Answer1215/p/11631457.html