Fetch with Async/Await Recipes
The browser and Node 22+ both ship `fetch`, but the easy-to-miss details (`response.ok`, content-type parsing, body shape on POST, parallel error isolation) are exactly where bugs hide. This snippet collects four recipes built on `async`/`await` and a mocked `fetch` so each example runs end-to-end. Use it as the baseline for code that talks to JSON APIs without reaching for axios or a wrapper library.
705 views
4
// Mock fetch so the example runs end-to-end
globalThis.fetch = async (url) => {
if (url.endsWith('/users/1')) {
return new Response(JSON.stringify({ id: 1, name: 'Ada' }), {
status: 200,
headers: { 'Content-Type': 'application/json' }
});
}
return new Response('not found', { status: 404 });
};
async function getJSON(url) {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP ${response.status} on ${url}`);
}
return response.json();
}
(async () => {
try {
const user = await getJSON('https://api.example.com/users/1');
console.log('user:', user);
} catch (err) {
console.error('failed:', err.message);
}
try {
await getJSON('https://api.example.com/users/999');
} catch (err) {
console.error('failed:', err.message);
}
})();The two non-obvious moves here are checking response.ok and using await response.json(). fetch only rejects on network failures, so a 404 or 500 still resolves successfully and you must inspect response.status (or the boolean shortcut response.ok, which is true for 200-299). response.json() returns a promise of the parsed body, which is why you need a second await after the first. The outer try/catch catches both transport errors and the manual throw, so callers handle one failure shape regardless of whether the network or the server caused it.
globalThis.fetch = async (url, options = {}) => {
const body = options.body ? JSON.parse(options.body) : null;
return new Response(JSON.stringify({ id: 42, ...body }), {
status: 201,
headers: { 'Content-Type': 'application/json' }
});
};
async function postJSON(url, payload) {
const response = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify(payload)
});
if (!response.ok) {
throw new Error(`HTTP ${response.status} on ${url}`);
}
return response.json();
}
(async () => {
const created = await postJSON('https://api.example.com/users', {
name: 'Grace',
role: 'engineer'
});
console.log('created:', created);
// created: { id: 42, name: 'Grace', role: 'engineer' }
})();POST adds three things over GET: an explicit method, a Content-Type header so the server parses the body correctly, and a serialized body (raw fetch does not stringify objects for you). Forgetting JSON.stringify is a classic bug: the body becomes [object Object] and the server returns 400. Accept: application/json is optional but tells well-behaved servers to skip XML or HTML negotiation. The wrapper pattern reads exactly like the GET version, which is the point: callers see one shape regardless of method.
globalThis.fetch = async (url) => {
if (url.endsWith('.json')) {
return new Response(JSON.stringify({ ok: true }), {
headers: { 'Content-Type': 'application/json' }
});
}
if (url.endsWith('.txt')) {
return new Response('hello world', {
headers: { 'Content-Type': 'text/plain' }
});
}
return new Response(new Uint8Array([1, 2, 3, 4]), {
headers: { 'Content-Type': 'application/octet-stream' }
});
};
async function getByContentType(url) {
const response = await fetch(url);
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const type = response.headers.get('content-type') || '';
if (type.includes('application/json')) return response.json();
if (type.startsWith('text/')) return response.text();
return response.arrayBuffer();
}
(async () => {
console.log(await getByContentType('https://api.example.com/data.json'));
console.log(await getByContentType('https://api.example.com/note.txt'));
const buf = await getByContentType('https://api.example.com/raw.bin');
console.log('bytes:', new Uint8Array(buf));
// { ok: true }
// hello world
// bytes: Uint8Array(4) [ 1, 2, 3, 4 ]
})();A Response body can only be read once, and the right reader depends on the payload: json() for JSON, text() for text and HTML, arrayBuffer() (or blob() in browsers) for binary. Inspecting the Content-Type header before picking a reader avoids the common bug where response.json() throws SyntaxError: Unexpected token because the server returned HTML on an error page. Using includes('application/json') rather than strict equality handles parameters like application/json; charset=utf-8 that real servers add. If you call the wrong reader, the body lock is consumed and you cannot retry; reach for response.clone() if you genuinely need two reads of the same body.
globalThis.fetch = async (url) => {
if (url.endsWith('/3')) {
return new Response('boom', { status: 500 });
}
const id = Number(url.split('/').pop());
return new Response(JSON.stringify({ id, name: `user-${id}` }), {
status: 200,
headers: { 'Content-Type': 'application/json' }
});
};
async function getJSON(url) {
const response = await fetch(url);
if (!response.ok) throw new Error(`HTTP ${response.status} on ${url}`);
return response.json();
}
(async () => {
const ids = [1, 2, 3, 4];
const settled = await Promise.allSettled(
ids.map(id => getJSON(`https://api.example.com/users/${id}`))
);
const users = settled
.filter(r => r.status === 'fulfilled')
.map(r => r.value);
const errors = settled
.filter(r => r.status === 'rejected')
.map(r => r.reason.message);
console.log('users:', users);
console.log('errors:', errors);
// users: [ { id: 1, ... }, { id: 2, ... }, { id: 4, ... } ]
// errors: [ 'HTTP 500 on .../users/3' ]
})();Promise.all is the wrong primitive for fan-out fetches because one rejection cancels the whole batch from the caller's perspective (the other requests still complete on the wire, but their results are lost). Promise.allSettled resolves with one descriptor per input and never rejects, so a single 500 does not torpedo the other three users. The status === 'fulfilled' partition keeps successes and errors separate, which is what most product UIs want: render what you got and show a partial-error banner. For tighter throughput limits, pair this with a small pLimit-style concurrency cap so a list of 1000 ids does not open 1000 sockets at once.