fetch, JSON and async

The concept

fetch asks a server for data and returns a promise — a value that will exist later. With async and await, asynchronous code reads like ordinary code: const res = await fetch(url); const data = await res.json();. JSON is the format that comes back: objects, arrays, strings and numbers, exactly like the dictionaries and lists you already know.

Three things to handle every time. Check res.ok before using the data, because a 404 or a 500 is not a JavaScript error and will not throw. Wrap it in try { … } catch (e) { … } so a dropped connection shows a message instead of a blank screen. And show a loading state: a user who sees nothing assumes the app is broken.

// The shape of every fetch: await, check ok, parse, catch.
const data = { jobs: [{ title: 'Data Analyst' }, { title: 'QA Engineer' }] };

async function loadJobs() {
  // In a real app this line is: const res = await fetch('/api/jobs');
  const res = { ok: true, json: async () => data };
  if (!res.ok) throw new Error('Request failed: ' + res.status);
  const json = await res.json();
  return json.jobs;
}

loadJobs()
  .then((jobs) => jobs.forEach((j) => console.log(j.title)))
  .catch((e) => console.error('Could not load jobs: ' + e.message));