Send asynchronous browser requests with fetch, XMLHttpRequest, JSON, errors, and progressive UI.
Lessons
Understand why AJAX requests should never block the UI.
Synchronous vs Asynchronous is easiest to learn by reading the example, changing it, and observing the result.
async function loadLessons() {
const response = await fetch('/api/lessons', {
headers: { 'Accept': 'application/json' }
});
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
return response.json();
}
loadLessons()
.then(lessons => console.log(lessons))
.catch(error => console.error('Failed to load:', error.message));Practice the Synchronous vs Asynchronous example in a small scratch file, then explain what changed and why.