[Svelte 3] Use await block to wait for a promise and handle loading state in Svelte 3

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}