Send asynchronous browser requests with fetch, XMLHttpRequest, JSON, errors, and progressive UI.
Lessons
Use ETag and Cache-Control with fetch.
HTTP Caching Headers is easiest to learn by reading the example, changing it, and observing the result.
const cache = new Map();
async function getLessons() {
if (cache.has('lessons')) return cache.get('lessons');
const res = await fetch('/api/lessons', { cache: 'no-cache' });
const data = await res.json();
cache.set('lessons', data); // reuse on the next call
return data;
}Practice the HTTP Caching Headers example in a small scratch file, then explain what changed and why.