Async Requests and Error States

Once you leave local state behind, the browser needs to wait for network work. This lesson teaches the shape of an asynchronous request, how to show loading state, and how to report failures cleanly.

The goal is to make the UI honest. If the request fails, say so. If it succeeds, update the visible state in one place.

Edit the panels below and press Run to preview. Nothing you type here is saved — refreshing the page restores the original starter code.

<button id="load" type="button">Load demo data</button>
<p id="status">Idle</p>
<ul id="results"></ul>

#status {
    margin-top: 1rem;  
    font-weight: 600;
}
#results{  
   margin-top: 1rem;
   padding-left: 1.25rem;
}

const load = document.getElementById("load");
const status = document.getElementById("status");
const results = document.getElementById("results");
async function fetchData() {
  status.textContent = "Loading...";  
results.innerHTML = "";  
try {    
   const data = await Promise.resolve(["One", "Two", "Three"]);    
results.innerHTML = data.map((item) => `<li>${item}</li>`).join("");    
status.textContent = "Loaded successfully";  
} catch (error) {
    status.textContent = "Unable to load data";  
}

}
load.addEventListener("click", fetchData);