Write a fetch call and log JSON from the Response

WHAT THIS TESTS: Even senior engineers are expected to fluently handle the modern Fetch API without hesitation. This question probes three specific things: first, whether you know fetch returns a Promise that resolves to a Response object rather than the data itself; second, whether you understand that Response body methods like json() are themselves asynchronous and return Promises; third, whether you recognize that fetch does not reject on HTTP error statuses such as 404 or 500, which is a common source of bugs in production code. Interviewers use this as a calibration question to see if you write robust async code or copy-paste snippets without understanding the underlying semantics.

A GOOD ANSWER COVERS: A good answer hits four things in order. First, wrap the call in an async function so you can use await. Second, await fetch(url) to get the Response object. Third, validate the response by checking response.ok or checking that response.status is in the 200 range before attempting to parse, because fetch treats 4xx and 5xx as resolved promises. Fourth, await response.json() to extract and parse the body, then log the result. Mentioning that json() returns a Promise and not the actual JSON shows you have internalized the two-stage resolution model.

COMMON WRONG ANSWERS: The biggest red flag is writing response.json without calling it as a function or without awaiting it, such as console.log(response.json) or const data = response.json(). Another red flag is treating the Response object as the final data, for example logging response directly instead of the parsed body. Some candidates also forget error handling entirely or assume a try-catch around fetch will catch HTTP 404 errors, which it will not unless they explicitly check response.ok and throw. Writing callback-style .then() chains is not wrong, but sticking to async/await is generally preferred in modern TypeScript and JavaScript codebases.

LIKELY FOLLOW-UPS: If you answer cleanly, expect the interviewer to ask how you would handle network timeouts, since fetch does not support timeout natively and requires an AbortController. They might also ask how you would type the JSON payload in TypeScript, or how to handle non-JSON responses gracefully. Another common follow-up is asking how to cancel an in-flight request, or how to set custom headers and method options in the second fetch argument.

ONE CONCRETE EXAMPLE: Here is a concise, production-aware snippet. Write: async function loadData() { try { const response = await fetch('https://api.example.com/data'); if (!response.ok) { throw new Error('HTTP ' + response.status); } const data = await response.json(); console.log(data); } catch (err) { console.error('Fetch failed:', err); } }. This demonstrates the two awaits, the explicit ok check, and proper error propagation.

Source: developer.mozilla.org