Working with Async Data

Many frontend applications work with asynchronous data that arrives after a request is completed. Because data loading takes time, applications must handle updates dynamically while keeping the interface responsive.

Svelte provides several tools that make working with async data much easier.

Understanding Async Data

Async data refers to information that is loaded later instead of being available immediately when the page renders.

For example:

• API responses;
• User data;
• Search results;
• Dashboard statistics;
• Product information.

Frontend applications often need to wait for this data before displaying content.

Using Async Functions

Open App.svelte and add the following code:

<script>
  let users = [];

  async function loadUsers() {
    const response = await fetch(
      'https://jsonplaceholder.typicode.com/users'
    );

    users = await response.json();
  }

  loadUsers();
</script>

The async keyword allows the function to work with asynchronous operations like API requests.

The await keyword pauses execution until the request finishes.

Rendering Async Data

Once the data loads, the interface updates automatically.

<ul>
  {#each users as user}
    <li>{user.name}</li>
  {/each}
</ul>

At first, the array is empty. After the request finishes, Svelte re-renders the list using the new data.