Send asynchronous browser requests with fetch, XMLHttpRequest, JSON, errors, and progressive UI.
Lessons
Show and hide loading indicators around requests.
Loading & Spinner States 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 & Spinner States example in a small scratch file, then explain what changed and why.