{"id":39281,"date":"2025-11-14T14:52:59","date_gmt":"2025-11-14T22:52:59","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=39281"},"modified":"2025-11-14T14:53:00","modified_gmt":"2025-11-14T22:53:00","slug":"what-is-the-fetch-api-in-javascript","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/questions\/what-is-the-fetch-api-in-javascript","title":{"rendered":"What is the fetch API in JavaScript?"},"content":{"rendered":"\n

If you have ever moved from XMLHttpRequest or a library to native browser features, you have probably run into the fetch API. It looks simple, but small details like error handling, timeouts, and uploads can trip people up. <\/p>\n\n\n\n

Question:<\/h2>\n\n\n\n

Hi folks,<\/em>
I keep seeing examples that use fetch, but I am not totally clear on best practices and edge cases. What is the fetch API in JavaScript? How do I use it for GET and POST requests, set timeouts, upload files, parse JSON safely, and handle errors correctly? Any pitfalls I should know about with CORS or credentials?<\/em>
Thanks!<\/em><\/p>\n\n\n\n

Answer:<\/h2>\n\n\n\n

The fetch API is a modern, promise-based interface for making HTTP requests in the browser and in many runtimes. It returns a Response<\/code> object and only rejects on network failures or aborts, not on HTTP error status by default. Let\u2019s dive a little deeper into how you can use it.<\/p>\n\n\n\n

1) GET JSON with proper error handling<\/h3>\n\n\n
async<\/span> function<\/span> getJSON<\/span>(url, options = {}<\/span>) <\/span>{\n\u00a0 const<\/span> res = await<\/span> fetch(url, options);\n\u00a0 if<\/span> (!res.ok) {\n\u00a0 \u00a0 \/\/ fetch does not throw on 4xx or 5xx, so check .ok<\/span>\n\u00a0 \u00a0 throw<\/span> new<\/span> Error<\/span>(`HTTP ${res.status}<\/span> ${res.statusText}<\/span>`<\/span>);\n\u00a0 }\n\u00a0 \/\/ Guard against invalid JSON<\/span>\n\u00a0 const<\/span> text = await<\/span> res.text();\n\u00a0 return<\/span> text ? JSON<\/span>.parse(text) : null<\/span>;\n}\n\ngetJSON('\/api\/user'<\/span>)\n\u00a0 .then(data<\/span> =><\/span> console<\/span>.log(data))\n\u00a0 .catch(err<\/span> =><\/span> console<\/span>.error('Request failed:'<\/span>, err));<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
2) POST JSON<\/h3>\n\n\n
async<\/span> function<\/span> postJSON<\/span>(url, body<\/span>) <\/span>{\n\u00a0 const<\/span> res = await<\/span> fetch(url, {\n\u00a0 \u00a0 method<\/span>: 'POST'<\/span>,\n\u00a0 \u00a0 headers<\/span>: { 'Content-Type'<\/span>: 'application\/json'<\/span> },\n\u00a0 \u00a0 body<\/span>: JSON<\/span>.stringify(body)\n\u00a0 });\n\u00a0 if<\/span> (!res.ok) throw<\/span> new<\/span> Error<\/span>(`HTTP ${res.status}<\/span>`<\/span>);\n\u00a0 return<\/span> res.json();\n}\n\npostJSON('\/api\/todos'<\/span>, { title<\/span>: 'Buy milk'<\/span> });<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
3) Timeouts and cancellation with AbortController<\/h3>\n\n\n
async<\/span> function<\/span> fetchWithTimeout<\/span>(url, options = {}, timeoutMs = 8000<\/span><\/span>) <\/span>{\n\u00a0 const<\/span> controller = new<\/span> AbortController();\n\u00a0 const<\/span> id = setTimeout(()<\/span> =><\/span> controller.abort(), timeoutMs);\n\u00a0 try<\/span> {\n\u00a0 \u00a0 const<\/span> res = await<\/span> fetch(url, { ...options, signal<\/span>: controller.signal });\n\u00a0 \u00a0 return<\/span> res;\n\u00a0 } finally<\/span> {\n\u00a0 \u00a0 clearTimeout(id);\n\u00a0 }\n}\n\n\/\/ Usage<\/span>\nfetchWithTimeout('\/api\/slow'<\/span>, {}, 5000<\/span>)\n\u00a0 .then(r<\/span> =><\/span> r.text())\n\u00a0 .catch(err<\/span> =><\/span> {\n\u00a0 \u00a0 if<\/span> (err.name === 'AbortError'<\/span>) console<\/span>.error('Request timed out'<\/span>);\n\u00a0 });<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
4) File uploads with FormData<\/h3>\n\n\n
async<\/span> function<\/span> uploadFile<\/span>(url, file<\/span>) <\/span>{\n\u00a0 const<\/span> form = new<\/span> FormData();\n\u00a0 form.append('file'<\/span>, file);\n\u00a0 \/\/ append any other fields your server expects<\/span>\n\u00a0 const<\/span> res = await<\/span> fetch(url, { method<\/span>: 'POST'<\/span>, body<\/span>: form });\n\u00a0 if<\/span> (!res.ok) throw<\/span> new<\/span> Error<\/span>(`HTTP ${res.status}<\/span>`<\/span>);\n\u00a0 return<\/span> res.json();\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
5) Download progress with streams<\/h3>\n\n\n\n
For large downloads, you can read the response body as a stream and emit progress updates.<\/p>\n\n\n
async<\/span> function<\/span> downloadWithProgress<\/span>(url, onProgress<\/span>) <\/span>{\n\u00a0 const<\/span> res = await<\/span> fetch(url);\n\u00a0 if<\/span> (!res.ok) throw<\/span> new<\/span> Error<\/span>(`HTTP ${res.status}<\/span>`<\/span>);\n\u00a0 const<\/span> contentLength = Number<\/span>(res.headers.get('Content-Length'<\/span>)) || 0<\/span>;\n\u00a0 const<\/span> reader = res.body.getReader();\n\u00a0 let<\/span> received = 0<\/span>;\n\u00a0 const<\/span> chunks = [];\n\u00a0 while<\/span> (true<\/span>) {\n\u00a0 \u00a0 const<\/span> { done, value } = await<\/span> reader.read();\n\u00a0 \u00a0 if<\/span> (done) break<\/span>;\n\u00a0 \u00a0 chunks.push(value);\n\u00a0 \u00a0 received += value.length;\n\u00a0 \u00a0 if<\/span> (contentLength) onProgress(received \/ contentLength);\n\u00a0 }\n\u00a0 return<\/span> new<\/span> Blob(chunks);\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
6) CORS and credentials gotchas<\/h3>\n\n\n\n