Getting Data from Servers (async & fetch)

Some things take time

Asking a server for data might take 50ms or 5 seconds. If JavaScript just stopped and waited, your whole page would freeze. Instead, slow operations return a promise: "I'll give you the answer later."

console.log("1. Ask for data");
setTimeout(() => console.log("3. Data arrived!"), 500);
console.log("2. Keep doing other things");

async / await: write it top to bottom

function fakeServer() {
  return new Promise((resolve) => setTimeout(() => resolve({ temp: 21 }), 300));
}

async function showWeather() {
  console.log("Loading…");
  const data = await fakeServer(); // wait here, without freezing the page
  console.log(`It's ${data.temp}°C`);
}

showWeather();

fetch: talking to real servers

In the browser, fetch gets data from a URL. Most APIs send JSON:

async function loadUser(id) {
  const response = await fetch(`https://api.example.com/users/${id}`);
  if (!response.ok) {
    throw new Error(`Request failed: ${response.status}`);
  }
  const user = await response.json();
  return user;
}

Always plan for failure

Networks fail: Wi-Fi drops, servers crash. Wrap risky calls in try / catch and show the user something helpful:

try {
  const user = await loadUser(42);
  render(user);
} catch (err) {
  showMessage("Couldn't load your profile. Check your connection and try again.");
}

Good apps handle three states for every request: loading, success, and error. Interviewers notice when you remember all three.