Send asynchronous browser requests with fetch, XMLHttpRequest, JSON, errors, and progressive UI.
Lessons
Tell connection failures from error responses.
Network vs HTTP Errors 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 Network vs HTTP Errors example in a small scratch file, then explain what changed and why.