[{"data":1,"prerenderedAt":378},["ShallowReactive",2],{"term-a\u002Fasync-await":3,"related-a\u002Fasync-await":363},{"id":4,"title":5,"acronym":6,"body":7,"category":345,"description":346,"difficulty":347,"extension":348,"letter":349,"meta":350,"navigation":196,"path":351,"related":352,"seo":357,"sitemap":358,"stem":361,"subcategory":6,"__hash__":362},"terms\u002Fterms\u002Fa\u002Fasync-await.md","Async\u002FAwait",null,{"type":8,"value":9,"toc":339},"minimark",[10,15,19,23,26,30,328,332,335],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"Async\u002Fawait is syntactic sugar that makes Promises look like normal, readable code. Instead of chaining .then().then().catch(), you write code that looks synchronous but actually waits for async operations. It's the reason modern JavaScript code is readable by humans.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"Async\u002Fawait is a JavaScript syntax (introduced in ES2017) that allows writing asynchronous code in a synchronous style. The async keyword marks a function as asynchronous (it implicitly returns a Promise). The await keyword pauses execution inside the async function until the awaited Promise resolves. Error handling uses standard try\u002Fcatch.",[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 Without async\u002Fawait (Promise chains)\nfunction loadUser(id) {\n  return fetch(`\u002Fapi\u002Fusers\u002F${id}`)\n    .then(res => res.json())\n    .then(user => user.name)\n    .catch(err => 'Unknown')\n}\n\n\u002F\u002F With async\u002Fawait (much cleaner)\nasync function loadUser(id) {\n  try {\n    const res = await fetch(`\u002Fapi\u002Fusers\u002F${id}`)\n    const user = await res.json()\n    return user.name\n  } catch {\n    return 'Unknown'\n  }\n}\n","javascript","",[38,39,40,49,74,106,135,159,185,191,198,204,223,231,261,281,294,305,317,323],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u002F\u002F Without async\u002Fawait (Promise chains)\n",[41,50,52,56,60,64,68,71],{"class":43,"line":51},2,[41,53,55],{"class":54},"spNyl","function",[41,57,59],{"class":58},"s2Zo4"," loadUser",[41,61,63],{"class":62},"sMK4o","(",[41,65,67],{"class":66},"sHdIc","id",[41,69,70],{"class":62},")",[41,72,73],{"class":62}," {\n",[41,75,77,81,84,87,90,94,97,100,103],{"class":43,"line":76},3,[41,78,80],{"class":79},"s7zQu","  return",[41,82,83],{"class":58}," fetch",[41,85,63],{"class":86},"swJcz",[41,88,89],{"class":62},"`",[41,91,93],{"class":92},"sfazB","\u002Fapi\u002Fusers\u002F",[41,95,96],{"class":62},"${",[41,98,67],{"class":99},"sTEyZ",[41,101,102],{"class":62},"}`",[41,104,105],{"class":86},")\n",[41,107,109,112,115,117,120,123,126,129,132],{"class":43,"line":108},4,[41,110,111],{"class":62},"    .",[41,113,114],{"class":58},"then",[41,116,63],{"class":86},[41,118,119],{"class":66},"res",[41,121,122],{"class":54}," =>",[41,124,125],{"class":99}," res",[41,127,128],{"class":62},".",[41,130,131],{"class":58},"json",[41,133,134],{"class":86},"())\n",[41,136,138,140,142,144,147,149,152,154,157],{"class":43,"line":137},5,[41,139,111],{"class":62},[41,141,114],{"class":58},[41,143,63],{"class":86},[41,145,146],{"class":66},"user",[41,148,122],{"class":54},[41,150,151],{"class":99}," user",[41,153,128],{"class":62},[41,155,156],{"class":99},"name",[41,158,105],{"class":86},[41,160,162,164,167,169,172,174,177,180,183],{"class":43,"line":161},6,[41,163,111],{"class":62},[41,165,166],{"class":58},"catch",[41,168,63],{"class":86},[41,170,171],{"class":66},"err",[41,173,122],{"class":54},[41,175,176],{"class":62}," '",[41,178,179],{"class":92},"Unknown",[41,181,182],{"class":62},"'",[41,184,105],{"class":86},[41,186,188],{"class":43,"line":187},7,[41,189,190],{"class":62},"}\n",[41,192,194],{"class":43,"line":193},8,[41,195,197],{"emptyLinePlaceholder":196},true,"\n",[41,199,201],{"class":43,"line":200},9,[41,202,203],{"class":47},"\u002F\u002F With async\u002Fawait (much cleaner)\n",[41,205,207,210,213,215,217,219,221],{"class":43,"line":206},10,[41,208,209],{"class":54},"async",[41,211,212],{"class":54}," function",[41,214,59],{"class":58},[41,216,63],{"class":62},[41,218,67],{"class":66},[41,220,70],{"class":62},[41,222,73],{"class":62},[41,224,226,229],{"class":43,"line":225},11,[41,227,228],{"class":79},"  try",[41,230,73],{"class":62},[41,232,234,237,239,242,245,247,249,251,253,255,257,259],{"class":43,"line":233},12,[41,235,236],{"class":54},"    const",[41,238,125],{"class":99},[41,240,241],{"class":62}," =",[41,243,244],{"class":79}," await",[41,246,83],{"class":58},[41,248,63],{"class":86},[41,250,89],{"class":62},[41,252,93],{"class":92},[41,254,96],{"class":62},[41,256,67],{"class":99},[41,258,102],{"class":62},[41,260,105],{"class":86},[41,262,264,266,268,270,272,274,276,278],{"class":43,"line":263},13,[41,265,236],{"class":54},[41,267,151],{"class":99},[41,269,241],{"class":62},[41,271,244],{"class":79},[41,273,125],{"class":99},[41,275,128],{"class":62},[41,277,131],{"class":58},[41,279,280],{"class":86},"()\n",[41,282,284,287,289,291],{"class":43,"line":283},14,[41,285,286],{"class":79},"    return",[41,288,151],{"class":99},[41,290,128],{"class":62},[41,292,293],{"class":99},"name\n",[41,295,297,300,303],{"class":43,"line":296},15,[41,298,299],{"class":62},"  }",[41,301,302],{"class":79}," catch",[41,304,73],{"class":62},[41,306,308,310,312,314],{"class":43,"line":307},16,[41,309,286],{"class":79},[41,311,176],{"class":62},[41,313,179],{"class":92},[41,315,316],{"class":62},"'\n",[41,318,320],{"class":43,"line":319},17,[41,321,322],{"class":62},"  }\n",[41,324,326],{"class":43,"line":325},18,[41,327,190],{"class":62},[11,329,331],{"id":330},"when-youll-hear-this","When You'll Hear This",[16,333,334],{},"Async functions always return a Promise, even if you return a plain value.,Don't await in a loop — use Promise.all for parallel requests.,Forgetting await is a top-tier bug source.",[336,337,338],"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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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":340},[341,342,343,344],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":330,"depth":51,"text":331},"frontend","Async\u002Fawait is syntactic sugar that makes Promises look like normal, readable code. Instead of chaining .then().then().","intermediate","md","a",{},"\u002Fterms\u002Fa\u002Fasync-await",[353,354,355,356],"Promise","Fetch","Event Loop","Callback",{"title":5,"description":346},{"changefreq":359,"priority":360},"weekly",0.7,"terms\u002Fa\u002Fasync-await","fKRVCpOA6VzVLtKNXgW4mAGidJSX9Hj4irfCTkRCedY",[364,368,372,375],{"title":356,"path":365,"acronym":6,"category":345,"difficulty":366,"description":367},"\u002Fterms\u002Fc\u002Fcallback","beginner","A callback is just a function you pass to another function, saying 'when you're done, call this.",{"title":355,"path":369,"acronym":6,"category":345,"difficulty":370,"description":371},"\u002Fterms\u002Fe\u002Fevent-loop","advanced","JavaScript can only do one thing at a time (single-threaded), but the Event Loop is the trick that makes it seem like it can multitask.",{"title":354,"path":373,"acronym":6,"category":345,"difficulty":366,"description":374},"\u002Fterms\u002Ff\u002Ffetch","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.",{"title":353,"path":376,"acronym":6,"category":345,"difficulty":347,"description":377},"\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.",1776518256438]