JavaScript async/await and fetch: A Practical Guide for Beginners

Anything that takes time in JavaScript — network calls, file reads, timers — returns a Promise. async/await is just nicer syntax for working with promises, and fetch is the modern way to make HTTP requests.

The basic shape

async function loadUser(id) {
  const res = await fetch('/api/users/' + id);
  if (!res.ok) throw new Error('HTTP ' + res.status);
  return res.json();
}

Handling errors

try {
  const user = await loadUser(42);
  render(user);
} catch (err) {
  console.error(err);
  showToast('Could not load user');
}

POSTing JSON

await fetch('/api/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Ada' })
});

Running things in parallel

const [user, posts] = await Promise.all([
  fetch('/api/user').then(r => r.json()),
  fetch('/api/posts').then(r => r.json()),
]);

Cancelling a request

const ac = new AbortController();
fetch('/slow', { signal: ac.signal });
setTimeout(() => ac.abort(), 5000);

Common mistakes

• Forgetting await — you get a Promise back, not the data
• Not checking res.ok
• await inside a forEach loop (use for..of or Promise.all)
• Catching errors and silently ignoring them