{"id":"l-js-4-5","courseId":"javascript-fundamentals","lang":"en","kind":"lesson","summary":"Explain why JavaScript waits without freezing, read and write promise-based code with then and async/await, call fetch with proper error handling, and predict output order using the event loop.","html":"

Pocket would be more useful if it could show your spending in euros too, which means asking a server for today’s exchange rates. That request might take 50 milliseconds or five seconds. If JavaScript simply stopped and waited, the whole page would freeze: no scrolling, no typing, no clicks. Since your code shares one thread with the page itself, it needs a way to start slow work, carry on, and pick up the result later. That is what asynchronous code is.

\n

Callbacks: “call me when it is done”

\n

The oldest form of “later” is a callback. setTimeout asks the browser to call a function after a delay:

\n
JavaScript
console.log(\"Requesting rates…\");\nsetTimeout(() => {\n  console.log(\"Rates arrived\");\n}, 100);\nconsole.log(\"Still responsive\");
\n

“Still responsive” prints before “Rates arrived”. setTimeout does not pause anything; it hands the function to the browser and returns immediately. Callbacks work, but when step two needs step one’s result and step three needs step two’s, they nest deeper and deeper, and error handling has to be repeated at every level. Promises were added to fix that.

\n

Promises: a value that arrives later

\n

A promise is an object that stands for a result that is not ready yet. It starts pending, and settles exactly once: fulfilled with a value, or rejected with an error. You attach what should happen next with .then (on success) and .catch (on failure).

\n

This course’s sandbox has no network, so the examples use fakeFetch, a stand-in that behaves like the real fetch: it returns a promise of a response object with ok, status and a json() method.

\n
JavaScript
function fakeFetch(url) {\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      if (url === \"/api/rates\") {\n        resolve({ ok: true, status: 200, json: async () => ({ EUR: 0.86, GBP: 0.75 }) });\n      } else {\n        resolve({ ok: false, status: 404, json: async () => ({ error: \"Not found\" }) });\n      }\n    }, 50);\n  });\n}\n\nfakeFetch(\"/api/rates\")\n  .then((response) => response.json())\n  .then((rates) => console.log(\"EUR rate:\", rates.EUR))\n  .catch((error) => console.log(\"Failed:\", error.message));
\n

Each .then returns a new promise, so steps chain in a flat line instead of nesting, and one .catch at the end handles a failure from any step. You will rarely create promises with new Promise yourself; libraries and browser APIs hand them to you, and your job is to consume them.

\n

async and await: promises that read like normal code

\n

async/await is a more readable way to write the same thing. Inside a function marked async, await promise pauses that function until the promise settles, then gives you its value. Errors become ordinary exceptions you catch with try/catch:

\n
JavaScript
function fakeFetch(url) {\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      const ok = url === \"/api/rates\";\n      const body = ok ? { EUR: 0.86 } : { error: \"Not found\" };\n      resolve({ ok, status: ok ? 200 : 404, json: async () => body });\n    }, 50);\n  });\n}\n\nasync function getJson(url) {\n  const response = await fakeFetch(url);\n  if (!response.ok) {\n    throw new Error(`HTTP ${response.status} for ${url}`);\n  }\n  return response.json();\n}\n\nasync function showRates() {\n  try {\n    const rates = await getJson(\"/api/rates\");\n    console.log(\"EUR:\", rates.EUR);\n    await getJson(\"/api/missing\");\n  } catch (error) {\n    console.log(\"Could not load:\", error.message);\n  }\n}\n\nshowRates();
\n

Notice what await does not do: it does not freeze the page. While showRates waits, the browser keeps handling clicks and drawing frames. Only this one function is paused.

\n

An async function always returns a promise, even when you return a plain value. So whoever calls it must await it too, or use .then.

\n\n

fetch, for real

\n

In a real page, you replace fakeFetch with the browser’s fetch, and the shape of the code stays the same:

\n
rates.js
async function getJson(url) {\n  const response = await fetch(url);\n  if (!response.ok) {\n    throw new Error(`HTTP ${response.status} for ${url}`);\n  }\n  return response.json();\n}
\n

The response.ok check is essential, and many tutorials leave it out. fetch only rejects when the request could not happen at all, for example when the user is offline. A 404 or a 500 is a perfectly good HTTP response, so the promise resolves, with ok set to false. Without the check, your code would try to read rates out of an error page.

\n

When two requests do not depend on each other, start both and wait once with Promise.all (inside an async function, like every await), which fulfils with an array of results or rejects as soon as either fails:

\n
rates.js
const [rates, categories] = await Promise.all([\n  getJson(\"/api/rates\"),\n  getJson(\"/api/categories\"),\n]);
\n

The event loop

\n

How can one thread do all this? The engine runs your code on a call stack, one function at a time. Slow things, such as timers and network requests, are handled by the browser outside the stack. When one finishes, its callback is put in a queue. Whenever the stack is empty, the event loop takes the next callback from a queue and runs it.

\n
\n Your code runs on the call stack. Timers and fetch are handled by the browser, which puts finished callbacks into queues. Promise callbacks go to the microtask queue, timers and events to the task queue. When the stack is empty, the event loop first runs all microtasks, then one task.\n \n Call stack\n \n showRates()\n \n main script\n \n Browser\n timers, fetch\n \n Microtasks\n promise callbacks\n \n Tasks\n timers, clicks\n \n \n \n \n \n 1. all microtasks\n 2. then one task\n
The event loop runs queued callbacks when the stack is empty
\n

There are two queues, and the order between them explains many puzzles. Promise callbacks go into the microtask queue; timers and events go into the task queue. Each time the stack empties, the loop runs every waiting microtask first, then one task, then checks microtasks again:

\n
JavaScript
console.log(\"1: script\");\nsetTimeout(() => console.log(\"4: timeout task\"), 0);\nPromise.resolve().then(() => console.log(\"3: promise microtask\"));\nconsole.log(\"2: script\");
\n

A timeout of 0 ms does not mean “now”; it means “as a task, once the stack is clear and the microtasks are done”. The same model explains why a long loop freezes the page: while your code occupies the stack, no click handler, timer or redraw can run.

\n\n

Section 4 is complete: Pocket lives on a page, reacts to clicks, takes input, saves data and can talk to a server. Section 5 turns this growing pile of code into a well-organised program.

\n","toc":[{"id":"sec-1","text":"Callbacks: “call me when it is done”","level":2},{"id":"sec-2","text":"Promises: a value that arrives later","level":2},{"id":"sec-3","text":"async and await: promises that read like normal code","level":2},{"id":"sec-4","text":"fetch, for real","level":2},{"id":"sec-5","text":"The event loop","level":2}],"takeaways":["JavaScript runs one thing at a time; slow work such as network requests and timers happens outside your code, which is called back when it finishes.","A promise is an object standing for a value that will arrive later; it ends up fulfilled with a value or rejected with an error.","await pauses only the surrounding async function until a promise settles; wrap awaits in try/catch to handle rejections.","fetch rejects only when the network fails; for HTTP errors such as 404 it resolves with response.ok set to false, so always check it.","After each piece of synchronous code, the event loop runs all queued promise callbacks before the next timer or event."],"further":[{"title":"Using promises (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises"},{"title":"async function (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function"},{"title":"Using the Fetch API (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch"},{"title":"The event loop (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Execution_model"}],"quiz":[{"q":"

In what order are the lines logged?

\n
JavaScript
console.log(\"A\");\nsetTimeout(() => console.log(\"B\"), 0);\nPromise.resolve().then(() => console.log(\"C\"));\nconsole.log(\"D\");
\n","options":[{"text":"A, B, C, D","why":"That is the order the lines are written, but B and C are callbacks that run later, after all synchronous code."},{"text":"A, D, B, C","why":"Both callbacks wait for the synchronous code, but promise callbacks (microtasks) run before timer callbacks."},{"text":"A, D, C, B","why":"Correct. A and D run now. Then the microtask queue empties ©, and only then does the timer’s task run (B), even with a 0 ms delay."}],"answer":2},{"q":"

const data = getRates(); console.log(data.EUR); where getRates is an async function. What is logged?

","options":[{"text":"The EUR rate, because async functions return their value directly.","why":"An async function always returns a promise. Without await, data is that promise, not the rates."},{"text":"undefined, because data is a pending promise, which has no EUR property.","why":"Correct. Write const data = await getRates(); inside an async function, or use .then."},{"text":"It throws, because you cannot call an async function without await.","why":"You can call it; you just get a promise back. Forgetting await fails quietly, which is why it is a common bug."}],"answer":1},{"q":"

Your server returns 404 Not Found for fetch("/api/rates"). What does the fetch promise do?

","options":[{"text":"It resolves with a response whose ok is false and status is 404.","why":"Correct. HTTP errors are still successful network round trips. You must check response.ok yourself and throw if you want a rejection."},{"text":"It rejects, so your catch block runs.","why":"fetch only rejects for network-level failures such as being offline. A 404 is a valid HTTP response."},{"text":"It never settles, so your code waits forever.","why":"The server answered, so the promise settles. It resolves with the 404 response."}],"answer":0},{"q":"

You need the rates and the category list, from two independent URLs, before rendering. Which is fastest?

","options":[{"text":"const r = await getRates(); const c = await getCategories();","why":"This works, but the second request only starts after the first finishes, so you wait for both one after the other."},{"text":"const [r, c] = await Promise.all([getRates(), getCategories()]);","why":"Correct. Both requests start immediately and you wait once, for the slower of the two."},{"text":"const r = getRates(); const c = getCategories(); without await.","why":"Both start in parallel, but r and c are promises, not data, so rendering with them would fail."}],"answer":1}],"exercise":{"kind":"web","mode":"js","starter":{"js":"// A stand-in for fetch: the sandbox has no network. It returns a promise\n// of a response with ok, status and json(), after a short delay.\nfunction fakeFetch(url) {\n const routes = {\n \"/api/rates\": { EUR: 0.86, GBP: 0.75 },\n \"/api/categories\": [{ name: \"food\" }, { name: \"travel\" }, { name: \"fun\" }],\n };\n return new Promise((resolve) => {\n setTimeout(() => {\n const ok = url in routes;\n const body = ok ? routes[url] : { error: \"Not found\" };\n resolve({ ok, status: ok ? 200 : 404, json: async () => body });\n }, 30);\n });\n}\n\n// Return the parsed JSON body, or throw an Error mentioning the status\nasync function getJson(url) {\n const response = fakeFetch(url);\n return response.json();\n}\n\n// [\"food\", \"travel\", \"fun\"], from /api/categories\nasync function loadCategoryNames() {\n const categories = getJson(\"/api/categories\");\n return categories.map((c) => c.name);\n}\n\n// The amount converted to euro cents (rounded), using /api/rates\nasync function toEuroCents(cents) {\n}\n\n// The JSON from url, or `fallback` if anything goes wrong\nasync function safeGetJson(url, fallback) {\n return getJson(url);\n}\n"},"solution":{"js":"// A stand-in for fetch: the sandbox has no network. It returns a promise\n// of a response with ok, status and json(), after a short delay.\nfunction fakeFetch(url) {\n const routes = {\n \"/api/rates\": { EUR: 0.86, GBP: 0.75 },\n \"/api/categories\": [{ name: \"food\" }, { name: \"travel\" }, { name: \"fun\" }],\n };\n return new Promise((resolve) => {\n setTimeout(() => {\n const ok = url in routes;\n const body = ok ? routes[url] : { error: \"Not found\" };\n resolve({ ok, status: ok ? 200 : 404, json: async () => body });\n }, 30);\n });\n}\n\nasync function getJson(url) {\n const response = await fakeFetch(url);\n if (!response.ok) {\n throw new Error(`HTTP ${response.status} for ${url}`);\n }\n return response.json();\n}\n\nasync function loadCategoryNames() {\n const categories = await getJson(\"/api/categories\");\n return categories.map((c) => c.name);\n}\n\nasync function toEuroCents(cents) {\n const rates = await getJson(\"/api/rates\");\n return Math.round(cents * rates.EUR);\n}\n\nasync function safeGetJson(url, fallback) {\n try {\n return await getJson(url);\n } catch {\n return fallback;\n }\n}\n\nloadCategoryNames().then((names) => console.log(names));\n"},"checks":[{"id":"get-json","test":"const rates = await getJson('/api/rates');\nreturn rates && rates.EUR === 0.86;\n"},{"id":"get-json-error","test":"try { await getJson('/api/missing'); return false; } catch (e) { return e instanceof Error && e.message.includes('404'); }\n"},{"id":"names","test":"const names = await loadCategoryNames();\nreturn Array.isArray(names) && names.join() === 'food,travel,fun';\n"},{"id":"euros","test":"return (await toEuroCents(1000)) === 860 && (await toEuroCents(450)) === 387;\n"},{"id":"safe","test":"const fallback = [];\nconst bad = await safeGetJson('/api/nope', fallback);\nconst good = await safeGetJson('/api/rates', null);\nreturn bad === fallback && good && good.GBP === 0.75;\n"}],"title":"Load data asynchronously","prompt":"

The sandbox has no network, so the starter gives you fakeFetch(url), which behaves like fetch: it returns a promise of a response with ok, status and an async json() method. Write four async functions:

\n\n","hints":["The starter forgets await: fakeFetch(url) gives a promise, and a promise has no json method. Write const response = await fakeFetch(url);.","After awaiting, check if (!response.ok) { throw new Error(`HTTP ${response.status}`); } before returning response.json().","safeGetJson needs try { return await getJson(url); } catch { return fallback; }. The await inside the try matters: without it, the rejection escapes the catch."],"explanation":"

Every function that waits for something is async and uses await, so the code reads top to bottom even though each step finishes later. getJson turns an HTTP error into a thrown Error, because fetch (and this fake) resolves successfully for a 404; after that, callers only need to handle one kind of failure. toEuroCents rounds after converting, keeping Pocket’s whole-cents rule: 450 × 0.86 is 387.0, and 1000 × 0.86 is 860. In safeGetJson, return await inside try is deliberate: awaiting there lets the rejection be thrown inside the try, where the catch can turn it into the fallback.

\n","checkLabels":{"get-json":"getJson returns the parsed body","get-json-error":"getJson throws an Error mentioning 404 for a missing URL","names":"loadCategoryNames returns the category names","euros":"toEuroCents converts with the EUR rate and rounds","safe":"safeGetJson returns the fallback when loading fails"}},"words":846,"readMinutes":4}