Handling Asynchronous Data with `#await` in Svelte | CodeSignal Learn

Handling Asynchronous Data with `#await` in Svelte | CodeSignal Learn

Introduction to Asynchronous Data in Svelte

In modern web development, asynchronous data is a fundamental concept. It refers to operations that take time to complete, such as fetching data from an API or reading a file. Handling these operations effectively is crucial for building responsive and dynamic applications. In Svelte, the #await block is a powerful tool for managing asynchronous data, allowing you to handle loading, success, and error states seamlessly. This lesson will introduce you to the #await block and show you how to use it to fetch and display data from an API. We’ll also explore the $state and $effect runes in Svelte, which are essential for managing reactive data and side effects. By the end of this lesson, you’ll be able to build a component that fetches and displays data dynamically based on user interaction.

Fetching Data from an API

Using the `#await` Block

The #await block in Svelte is used to handle promises and manage the different states of an asynchronous operation: loading, success, and error. The syntax is straightforward and intuitive. Here’s how we use the #await block in our example: Svelte {#await postPromise} <p>Loading post...</p> {:then post} <h2>{post.title}</h2> <p>{post.body}</p> {:catch error} <p>Error: {error.message}</p> {/await} In this code: The #await postPromise block handles the loading state, displaying a message while the data is being fetched. The :then post block handles the success state, displaying the post’s title and body once the data is fetched. The :catch error block handles the error state, displaying an error message if something goes wrong during the fetch operation. This structure ensures that the user interface remains responsive and informative throughout the entire process.

Sign up

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

To fetch data from an API in Svelte, we use the fetch function, which is built into modern browsers. The fetch function returns a promise that resolves to the response from the API. We can then process this response to extract the data we need.

In our example, we’ll fetch a post from the JSONPlaceholder API, a free online REST API for testing and prototyping. We’ll use the $state rune to create a reactive variable postId that represents the ID of the post we want to fetch. We’ll also use the $effect rune to trigger the fetch operation whenever postId changes.

Here’s the initial setup:

Svelte

<script>
  let postId = $state(1);
  let postPromise = $state({});

  $effect(() => {
    postPromise = fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`)
      .then(res => res.json())
      .catch(error => {
        console.error("Error fetching post:", error);
        throw error;
      });
  });
</script>

In this code, postId is a reactive variable that starts with the value 1. The $effect rune ensures that whenever postId changes, the fetch operation is triggered, and the result is stored in postPromise.

Handling User Interaction

To make our component interactive, we’ll add a button that allows the user to load the next post. When the button is clicked, we’ll increment the postId variable, which will trigger a new fetch operation and update the UI. Here’s the code for the button: <button onclick={() => postId++}>Load Next Post</button> When the button is clicked, postId is incremented by 1. Since postId is a reactive variable, the $effect rune will detect the change and trigger a new fetch operation. The #await block will then update the UI to reflect the new data.