tezvyn:

Write a createUser function that POSTs JSON via fetch

AI-drafted, machine-checkedSource: developer.mozilla.orgbeginner
Write a createUser function that POSTs JSON via fetch
WHAT IT TESTS

precise fetch configuration for JSON POST requests. A strong answer names method POST, headers Content-Type application/json, and body JSON.stringify(data) with return typing. Red flag: passing the raw object as body or omitting headers.

WHAT THIS TESTS: This question checks whether you can configure a modern fetch call for a JSON POST endpoint without relying on a library like axios. Interviewers want to see that you know fetch defaults to GET, that you must explicitly set the method to POST, and that you understand the separation between the network Response object and the actual parsed JSON body. At the senior level it also probes whether you think about error handling, since fetch promises resolve even on HTTP 404 or 500 status codes.

A GOOD ANSWER COVERS: First, the method option must be set to POST because fetch uses GET by default. Second, the headers option must include Content-Type set to application/json so the server knows how to parse the payload. Third, the body option must be JSON.stringify(data) because fetch does not automatically serialize objects; passing the raw object results in the string object Object. Fourth, you should await the fetch call, then check response.ok or response.status before calling response.json() to parse the returned data. Fifth, the function should be typed to return Promise of any or a proper user interface rather than the raw Response.

COMMON WRONG ANSWERS: Passing the data object directly into the body field without JSON.stringify is the most frequent mistake and silently breaks the request. Omitting the Content-Type header is another red flag because many APIs will reject the request or fail to parse the payload. Returning the raw Response object instead of awaiting response.json() misses the point of the function signature which asks for the parsed result. Using fetch without checking response.ok is also a red flag because fetch only rejects on network failure, not on HTTP error codes.

LIKELY FOLLOW-UPS: The interviewer might ask how you would handle network errors versus HTTP 4xx or 5xx errors. They might also ask what happens if you forget to call JSON.stringify, or how you would strongly type the return value instead of using Promise of any. Another common follow-up is how to abort a request using an AbortController signal, or how to handle timeouts since fetch has no built-in timeout option.

ONE CONCRETE EXAMPLE: A solid implementation looks like this. Declare an async function named createUser that accepts data of type name string email string. Call fetch with the url slash api slash users and an options object. Inside the options object set method to POST, set headers to a new object with Content-Type equal to application json, and set body to JSON dot stringify of data. Await the fetch call and store the response. If response dot ok is false throw a new error with the status text. Otherwise return await response dot json. This gives you proper serialization, correct headers, and basic error handling in under ten lines.

Source: developer.mozilla.org

Read the original → developer.mozilla.org

Get five bites like this every day.

Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.