Send asynchronous browser requests with fetch, XMLHttpRequest, JSON, errors, and progressive UI.
Lessons
Show loading states and handle failed network or server responses.
Loading, Errors and Retry UI is easiest to learn by reading the example, changing it, and observing the result.
const list = document.querySelector('#list');
async function load() {
list.innerHTML = '<p>Loading…</p>';
try {
const res = await fetch('/api/lessons');
if (!res.ok) throw new Error(`HTTP ${res.status}`); // server/HTTP error
const lessons = await res.json();
list.innerHTML = lessons.length
? lessons.map(l => `<li>${l.title}</li>`).join('')
: '<p>No lessons yet.</p>'; // empty state
} catch (error) {
list.innerHTML = `<p class="error">Could not load: ${error.message}</p>`;
}
}Practice the Loading, Errors and Retry UI example in a small scratch file, then explain what changed and why.