What is await block in Svelte?

Svelte, unlike traditional frameworks such as React, Angular, or Vue, functions as a compiler with remarkable versatility known for its innovative approach to reactive web development. It distinguishes itself by not relying on a virtual DOM; instead, it compiles directly to vanilla JavaScript and interacts with the DOM. This unique approach results in highly efficient JavaScript output, which is notably compact compared to its counterparts, and consequently, it delivers impressive performance. Among its features, the await block stands out as a powerful tool for handling asynchronous operations.

The await block in Svelte is designed to simplify asynchronous programming. It allows us to await promises and handle the asynchronous resolution seamlessly, resulting in cleaner and more maintainable code. This block is particularly useful when dealing with tasks like data fetching from APIs or database calls, where response times can vary.

Syntax of the await block

To use the await block in Svelte, we typically define it within our component’s script section. Here’s a simplified syntax:

<script>
  let data;
  
  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    data = await response.json();
  };
</script>
<main>
  <await promise={fetchData()}>
    {#then data}
      <!-- Render the data when the promise resolves -->
      <p>{data}</p>
    {:then}
      <!-- Render a loading state or handle errors -->
      <p>Loading...</p>
    {/then}
  </await>
</main>

  • We define a variable data to store the fetched data.

  • The fetchData function is marked as async, and it makes an asynchronous request to an API.

  • Inside the await block, the {#then} block is used to render content when the promise resolves successfully, and {:then} is used for handling loading states or errors.

FLowchart

The following diagram illustrates the flow of control of the await block in Svelte:

Working of the await block in Svelte
Working of the await block in Svelte

Fetching data from an API

Let’s consider a scenario where we need to fetch data from a remote API and display it in our Svelte app. The await block simplifies this process:

<script>
  let data = null; // Initialize a variable to store fetched data as null

  // Define an asynchronous function named 'fetchData'
  async function fetchData() {
    // Asynchronously fetch data from an API
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    // Asynchronously parse the response as JSON
    const jsonData = await response.json();
    // Store the parsed data in the 'data' variable
    data = jsonData;
  }

  // Call the 'fetchData' function to initiate data fetching
  fetchData(); 
</script>

<main>
  <h1>Svelte data fetching example with await block</h1>
  <!-- If 'data' is truthy (not null), execute the following statements -->
  {#if data} 
    <ul>
      <li>
        <!-- Display the 'userId' property from the 'data' -->
        <strong>User ID:</strong> {data.userId}
      </li>
      <li>
        <!-- Display the 'id' property from the 'data' -->
        <strong>ID:</strong> {data.id}
      </li>
      <li>
        <!-- Display the 'title' property from the 'data' -->
        <strong>Title:</strong> {data.title}
      </li>
    </ul>
  <!-- If 'data' is falsy (null), execute the following statements -->
  {:else}
    <!-- Display a loading message -->
    <p>Loading data...</p>
  {/if}
</main>
Fetching data from an API with await block in Svelte

Note: Try changing the https://jsonplaceholder.typicode.com/todos/1" value from 11 to any other value and observe the change in the output.

Code explanation

Now, let’s break down the code line by line:

  • Line 2: Initializes a variable data to store fetched data and set it to null. This variable will be used to hold the fetched JSON data.

  • Line 5: Defines an asynchronous function fetchData. Inside this function, we will make an asynchronous API request to fetch data.

  • Line 7: Makes an asynchronous API request using the fetch function to get data from the specified URL (JSONPlaceholder API). We fetch data related to a specific to-do item with an ID of 11.

  • Line 9: Asynchronously parses the response from the API as JSON and stores it in the jsonData variable.

  • Line 11: Assigns the parsed JSON data stored in the jsonData variable to the data variable. This step effectively populates the data variable with the fetched data.

  • Line 15: Calls the fetchData function immediately to start the process of fetching and updating the data.

  • Line 19: Displays a heading in the main content area of the component to provide context for what the component does.

  • Line 21: Starts a conditional block with {#if data}. This block checks whether the data variable is truthy (not null).

  • Line 25: Displays the label “User ID” and the actual userId property from the data variable.

  • Line 29: Displays the label “ID” and the id property from the data variable.

  • Line 33: Displays the label “Title” and the title property from the data variable.

  • Line 37: In the {:else} block, handle the case where data is falsy (null), indicating that data is still being fetched.

  • Line 40: Displays a loading message indicating that data is in the process of being fetched.

Conclusion

The await block in Svelte simplifies handling asynchronous operations, making our code cleaner and more readable. It’s a powerful tool for fetching and displaying data from external sources in our Svelte applications. By understanding how to use the await block, we can create responsive and efficient web applications that provide a seamless user experience.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved