Send asynchronous browser requests with fetch, XMLHttpRequest, JSON, errors, and progressive UI.
Lessons
Compare the old and modern request APIs.
XHR vs fetch is easiest to learn by reading the example, changing it, and observing the result.
// Old: XMLHttpRequest
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/lessons');
xhr.onload = () => console.log(JSON.parse(xhr.responseText));
xhr.send();
// Modern: fetch + async/await
const res = await fetch('/api/lessons');
console.log(await res.json());Practice the XHR vs fetch example in a small scratch file, then explain what changed and why.