[{"data":1,"prerenderedAt":353},["ShallowReactive",2],{"term-f\u002Ffetch":3,"related-f\u002Ffetch":337},{"id":4,"title":5,"acronym":6,"body":7,"category":319,"description":320,"difficulty":321,"extension":322,"letter":323,"meta":324,"navigation":168,"path":325,"related":326,"seo":331,"sitemap":332,"stem":335,"subcategory":6,"__hash__":336},"terms\u002Fterms\u002Ff\u002Ffetch.md","Fetch",null,{"type":8,"value":9,"toc":313},"minimark",[10,15,19,23,26,30,302,306,309],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"Fetch is the modern, built-in JavaScript way to make HTTP requests to APIs. You tell it a URL, it goes and gets the data, and you handle the response. It replaced the older, uglier XMLHttpRequest. It returns a Promise, so you can use async\u002Fawait with it.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"The Fetch API is a modern browser API for making HTTP requests. It returns a Promise that resolves to a Response object. Unlike XMLHttpRequest, Fetch uses Promises natively, supports streaming, and provides a cleaner interface. Note: Fetch does not reject on HTTP error status codes (4xx\u002F5xx) — you must check response.ok manually.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F Basic GET request\nconst res = await fetch('https:\u002F\u002Fapi.example.com\u002Fusers')\nif (!res.ok) throw new Error(`HTTP error: ${res.status}`)\nconst users = await res.json()\n\n\u002F\u002F POST with JSON body\nconst res2 = await fetch('\u002Fapi\u002Fusers', {\n  method: 'POST',\n  headers: { 'Content-Type': 'application\u002Fjson' },\n  body: JSON.stringify({ name: 'Alice' })\n})\n","javascript","",[38,39,40,49,87,140,163,170,176,205,226,256,294],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u002F\u002F Basic GET request\n",[41,50,52,56,60,64,68,72,75,78,82,84],{"class":43,"line":51},2,[41,53,55],{"class":54},"spNyl","const",[41,57,59],{"class":58},"sTEyZ"," res ",[41,61,63],{"class":62},"sMK4o","=",[41,65,67],{"class":66},"s7zQu"," await",[41,69,71],{"class":70},"s2Zo4"," fetch",[41,73,74],{"class":58},"(",[41,76,77],{"class":62},"'",[41,79,81],{"class":80},"sfazB","https:\u002F\u002Fapi.example.com\u002Fusers",[41,83,77],{"class":62},[41,85,86],{"class":58},")\n",[41,88,90,93,96,99,102,105,108,111,114,117,119,122,125,128,130,132,135,138],{"class":43,"line":89},3,[41,91,92],{"class":66},"if",[41,94,95],{"class":58}," (",[41,97,98],{"class":62},"!",[41,100,101],{"class":58},"res",[41,103,104],{"class":62},".",[41,106,107],{"class":58},"ok) ",[41,109,110],{"class":66},"throw",[41,112,113],{"class":62}," new",[41,115,116],{"class":70}," Error",[41,118,74],{"class":58},[41,120,121],{"class":62},"`",[41,123,124],{"class":80},"HTTP error: ",[41,126,127],{"class":62},"${",[41,129,101],{"class":58},[41,131,104],{"class":62},[41,133,134],{"class":58},"status",[41,136,137],{"class":62},"}`",[41,139,86],{"class":58},[41,141,143,145,148,150,152,155,157,160],{"class":43,"line":142},4,[41,144,55],{"class":54},[41,146,147],{"class":58}," users ",[41,149,63],{"class":62},[41,151,67],{"class":66},[41,153,154],{"class":58}," res",[41,156,104],{"class":62},[41,158,159],{"class":70},"json",[41,161,162],{"class":58},"()\n",[41,164,166],{"class":43,"line":165},5,[41,167,169],{"emptyLinePlaceholder":168},true,"\n",[41,171,173],{"class":43,"line":172},6,[41,174,175],{"class":47},"\u002F\u002F POST with JSON body\n",[41,177,179,181,184,186,188,190,192,194,197,199,202],{"class":43,"line":178},7,[41,180,55],{"class":54},[41,182,183],{"class":58}," res2 ",[41,185,63],{"class":62},[41,187,67],{"class":66},[41,189,71],{"class":70},[41,191,74],{"class":58},[41,193,77],{"class":62},[41,195,196],{"class":80},"\u002Fapi\u002Fusers",[41,198,77],{"class":62},[41,200,201],{"class":62},",",[41,203,204],{"class":62}," {\n",[41,206,208,212,215,218,221,223],{"class":43,"line":207},8,[41,209,211],{"class":210},"swJcz","  method",[41,213,214],{"class":62},":",[41,216,217],{"class":62}," '",[41,219,220],{"class":80},"POST",[41,222,77],{"class":62},[41,224,225],{"class":62},",\n",[41,227,229,232,234,237,239,242,244,246,248,251,253],{"class":43,"line":228},9,[41,230,231],{"class":210},"  headers",[41,233,214],{"class":62},[41,235,236],{"class":62}," {",[41,238,217],{"class":62},[41,240,241],{"class":210},"Content-Type",[41,243,77],{"class":62},[41,245,214],{"class":62},[41,247,217],{"class":62},[41,249,250],{"class":80},"application\u002Fjson",[41,252,77],{"class":62},[41,254,255],{"class":62}," },\n",[41,257,259,262,264,267,269,272,274,277,280,282,284,287,289,292],{"class":43,"line":258},10,[41,260,261],{"class":210},"  body",[41,263,214],{"class":62},[41,265,266],{"class":58}," JSON",[41,268,104],{"class":62},[41,270,271],{"class":70},"stringify",[41,273,74],{"class":58},[41,275,276],{"class":62},"{",[41,278,279],{"class":210}," name",[41,281,214],{"class":62},[41,283,217],{"class":62},[41,285,286],{"class":80},"Alice",[41,288,77],{"class":62},[41,290,291],{"class":62}," }",[41,293,86],{"class":58},[41,295,297,300],{"class":43,"line":296},11,[41,298,299],{"class":62},"}",[41,301,86],{"class":58},[11,303,305],{"id":304},"when-youll-hear-this","When You'll Hear This",[16,307,308],{},"Fetch won't throw on 404 — always check response.ok.,Use AbortController to cancel fetch requests.,Fetch is now available in Node.js 18+ natively.",[310,311,312],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":36,"searchDepth":51,"depth":51,"links":314},[315,316,317,318],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":304,"depth":51,"text":305},"frontend","Fetch is the modern, built-in JavaScript way to make HTTP requests to APIs. You tell it a URL, it goes and gets the data, and you handle the response.","beginner","md","f",{},"\u002Fterms\u002Ff\u002Ffetch",[327,328,329,330],"Ajax","Promise","Async\u002FAwait","JSON",{"title":5,"description":320},{"changefreq":333,"priority":334},"weekly",0.7,"terms\u002Ff\u002Ffetch","mL7YC6ccTGTFelfOLZ7nnLT7KnY1BUzLWyIJDIrS8jE",[338,341,345,350],{"title":327,"path":339,"acronym":6,"category":319,"difficulty":321,"description":340},"\u002Fterms\u002Fa\u002Fajax","Ajax is the technique of loading data from a server in the background without refreshing the whole page.",{"title":329,"path":342,"acronym":6,"category":319,"difficulty":343,"description":344},"\u002Fterms\u002Fa\u002Fasync-await","intermediate","Async\u002Fawait is syntactic sugar that makes Promises look like normal, readable code. Instead of chaining .then().then().",{"title":330,"path":346,"acronym":347,"category":348,"difficulty":321,"description":349},"\u002Fterms\u002Fj\u002Fjson","JavaScript Object Notation","backend","JSON is the universal language the internet uses to pass data around. It looks like a JavaScript object — curly braces, key-value pairs.",{"title":328,"path":351,"acronym":6,"category":319,"difficulty":343,"description":352},"\u002Fterms\u002Fp\u002Fpromise","A Promise is JavaScript's way of saying 'I'll give you a value eventually — it's not ready yet, but I promise.",1776518279576]