[{"data":1,"prerenderedAt":2225},["ShallowReactive",2],{"i-heroicons:moon-20-solid":3,"i-simple-icons:bluesky":8,"i-simple-icons:github":11,"i-simple-icons:x":13,"i-simple-icons:linkedin":15,"i-heroicons:chevron-right-20-solid":18,"i-heroicons:bars-3-center-left-20-solid":20,"i-heroicons:home-20-solid":22,"i-heroicons:rss-solid":24,"i-heroicons:code-bracket-square-20-solid":26,"\u002Fblog\u002Fhttp-requests-in-javascript":28,"i-heroicons:chevron-down-20-solid":2223},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,20,false,"\u003Cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M7.455 2.004a.75.75 0 0 1 .26.77a7 7 0 0 0 9.958 7.967a.75.75 0 0 1 1.067.853A8.5 8.5 0 1 1 6.647 1.921a.75.75 0 0 1 .808.083\" clip-rule=\"evenodd\"\u002F>",{"left":4,"top":4,"width":9,"height":9,"rotate":4,"vFlip":6,"hFlip":6,"body":10},24,"\u003Cpath fill=\"currentColor\" d=\"M5.202 2.857C7.954 4.922 10.913 9.11 12 11.358c1.087-2.247 4.046-6.436 6.798-8.501C20.783 1.366 24 .213 24 3.883c0 .732-.42 6.156-.667 7.037c-.856 3.061-3.978 3.842-6.755 3.37c4.854.826 6.089 3.562 3.422 6.299c-5.065 5.196-7.28-1.304-7.847-2.97c-.104-.305-.152-.448-.153-.327c0-.121-.05.022-.153.327c-.568 1.666-2.782 8.166-7.847 2.97c-2.667-2.737-1.432-5.473 3.422-6.3c-2.777.473-5.899-.308-6.755-3.369C.42 10.04 0 4.615 0 3.883c0-3.67 3.217-2.517 5.202-1.026\"\u002F>",{"left":4,"top":4,"width":9,"height":9,"rotate":4,"vFlip":6,"hFlip":6,"body":12},"\u003Cpath fill=\"currentColor\" d=\"M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\u002F>",{"left":4,"top":4,"width":9,"height":9,"rotate":4,"vFlip":6,"hFlip":6,"body":14},"\u003Cpath fill=\"currentColor\" d=\"M14.234 10.162L22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299l-.929-1.329L3.076 1.56h3.182l5.965 8.532l.929 1.329l7.754 11.09h-3.182z\"\u002F>",{"left":4,"top":4,"width":9,"height":9,"rotate":4,"vFlip":6,"hFlip":6,"body":16,"hidden":17},"\u003Cpath fill=\"currentColor\" d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037c-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85c3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.06 2.06 0 0 1-2.063-2.065a2.064 2.064 0 1 1 2.063 2.065m1.782 13.019H3.555V9h3.564zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0z\"\u002F>",true,{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":19},"\u003Cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10L8.22 6.28a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":21},"\u003Cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M2 4.75A.75.75 0 0 1 2.75 4h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 4.75m0 10.5a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1-.75-.75M2 10a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 2 10\" clip-rule=\"evenodd\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":23},"\u003Cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M9.293 2.293a1 1 0 0 1 1.414 0l7 7A1 1 0 0 1 17 11h-1v6a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6H3a1 1 0 0 1-.707-1.707z\" clip-rule=\"evenodd\"\u002F>",{"left":4,"top":4,"width":9,"height":9,"rotate":4,"vFlip":6,"hFlip":6,"body":25},"\u003Cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M3.75 4.5a.75.75 0 0 1 .75-.75h.75c8.284 0 15 6.716 15 15v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75v-.75C18 11.708 12.292 6 5.25 6H4.5a.75.75 0 0 1-.75-.75zm0 6.75a.75.75 0 0 1 .75-.75h.75a8.25 8.25 0 0 1 8.25 8.25v.75a.75.75 0 0 1-.75.75H12a.75.75 0 0 1-.75-.75v-.75a6 6 0 0 0-6-6H4.5a.75.75 0 0 1-.75-.75zm0 7.5a1.5 1.5 0 1 1 3 0a1.5 1.5 0 0 1-3 0\" clip-rule=\"evenodd\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":27},"\u003Cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M4.25 2A2.25 2.25 0 0 0 2 4.25v11.5A2.25 2.25 0 0 0 4.25 18h11.5A2.25 2.25 0 0 0 18 15.75V4.25A2.25 2.25 0 0 0 15.75 2zm4.03 6.28a.75.75 0 0 0-1.06-1.06L4.97 9.47a.75.75 0 0 0 0 1.06l2.25 2.25a.75.75 0 0 0 1.06-1.06L6.56 10zm4.5-1.06a.75.75 0 1 0-1.06 1.06L13.44 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06l2.25-2.25a.75.75 0 0 0 0-1.06z\" clip-rule=\"evenodd\"\u002F>",{"id":29,"title":30,"body":31,"description":2208,"extension":2209,"featured":17,"meta":2210,"navigation":17,"path":2218,"published_on":2219,"seo":2220,"stem":2221,"__hash__":2222},"blog\u002Fblog\u002FHTTP Requests in JavaScript.md","HTTP Requests in JavaScript",{"type":32,"value":33,"toc":2203},"minimark",[34,46,52,60,71,76,111,117,153,160,165,170,180,207,210,232,236,239,254,258,273,334,338,344,358,362,366,373,390,394,400,428,447,451,458,584,588,592,602,634,638,641,670,674,691,762,766,785,791,1051,1054,1122,1128,1446,1449,1452,1458,1575,1581,1669,1672,1675,1688,1692,1792,1796,1941,1945,2111,2115,2158,2161,2172,2176,2199],[35,36,37,38,45],"p",{},"Making requests is the heart of the Internet. Whenever you are browsing the internet, all what you are doing is requesting information from servers, which are basically interconnected computers. It's the foundation of how websites work. A simple case is a person typing \"",[39,40,44],"a",{"href":41,"rel":42},"http:\u002F\u002Fwww.duckduckgo.com",[43],"nofollow","www.duckduckgo.com","\" and getting the DuckDuckGo search page. A request is made to a web server, which then sends back the files for that page, which will be rendered in the browser as a web page. This is made possible by a protocol known as HTTP (HyperText Transfer Protocol). On MDN web docs, the HTTP protocol is described as:",[47,48,49],"blockquote",{},[35,50,51],{},"HTTP is a protocol which allows the fetching of resources, such as HTML documents. It is the foundation of any data exchange on the Web, and it is a client-server protocol, which means requests are initiated by the recipient, usually the Web browser. A complete document is reconstructed from the different sub-documents fetched, for instance text, layout description, images, videos, scripts, and more.",[35,53,54,55,59],{},"Requesting a resource from the client side uses this HTTP protocol, and these types of requests are known as ",[56,57,58],"strong",{},"HTTP requests",". These requests are essential for any type of online activity performed on the web.",[35,61,62,63,66,67,70],{},"JavaScript has a set of great tools and methods that allow us to make HTTP requests to send or receive data from a certain server or endpoint. A couple of commonly used ways to make requests are ",[56,64,65],{},"XMLHttpRequest"," and ",[56,68,69],{},"Fetch",".",[72,73,75],"h2",{"id":74},"xmlhttprequest-xhr","XMLHttpRequest (XHR)",[35,77,78,81,82,85,86,89,90,92,93,96,97,101,102,106,107,110],{},[56,79,80],{},"AJAX"," stands for ",[56,83,84],{},"A","synchronous ",[56,87,88],{},"J","avaScript ",[56,91,84],{},"nd ",[56,94,95],{},"X","ML. Requests made are ",[98,99,100],"em",{},"asynchronous",", which means they don't interrupt the execution of other JavaScript code. In other words, JavaScript code besides the AJAX code doesn't have to wait for requests to finish being executed. It can execute simultaneously. The method that makes this possible is the ",[103,104,105],"code",{},"XMLHttpRequest()",". Despite the prefix ",[98,108,109],{},"'XML'",", we can process any form of data for our requests.",[35,112,113,114,116],{},"The ",[103,115,105],{}," method works as a constructor for us to create an instance and call our AJAX requests on.",[118,119,124],"pre",{"className":120,"code":121,"language":122,"meta":123,"style":123},"language-js shiki shiki-themes github-dark","const xhr = new XMLHttpRequest();\n","js","",[103,125,126],{"__ignoreMap":123},[127,128,131,135,139,142,145,149],"span",{"class":129,"line":130},"line",1,[127,132,134],{"class":133},"snl16","const",[127,136,138],{"class":137},"sDLfK"," xhr",[127,140,141],{"class":133}," =",[127,143,144],{"class":133}," new",[127,146,148],{"class":147},"svObZ"," XMLHttpRequest",[127,150,152],{"class":151},"s95oV","();\n",[35,154,155,156,159],{},"Our ",[103,157,158],{},"xhr"," object has a number of methods and properties that allow us to make different types of requests.",[161,162,164],"h3",{"id":163},"methods","Methods",[166,167,169],"h4",{"id":168},"xhropen","xhr.open()",[35,171,172,173,176,177,179],{},"We can then use the ",[103,174,175],{},"open()"," method on our ",[103,178,158],{}," object to initialize or configure a request. This method takes the following parameters:",[181,182,183,187,190,204],"ol",{},[184,185,186],"li",{},"Method: GET, POST, PUT or DELETE,",[184,188,189],{},"URL: Path to our resource,",[184,191,192,193,196,197,200,201,203],{},"Async: Boolean value (",[103,194,195],{},"true"," or ",[103,198,199],{},"false","); Optional & default value is ",[103,202,195],{},",",[184,205,206],{},"Username & Password — Optional; Credentials if authentication is needed.",[35,208,209],{},"It follows the syntax:",[118,211,213],{"className":120,"code":212,"language":122,"meta":123,"style":123},"xhr.open(Method, URL[, Async]);\n",[103,214,215],{"__ignoreMap":123},[127,216,217,220,223,226,229],{"class":129,"line":130},[127,218,219],{"class":151},"xhr.",[127,221,222],{"class":147},"open",[127,224,225],{"class":151},"(Method, ",[127,227,228],{"class":137},"URL",[127,230,231],{"class":151},"[, Async]);\n",[166,233,235],{"id":234},"xhrsend","xhr.send()",[35,237,238],{},"This method allows us to open and send our request. It takes an optional parameter that contains our request body, which is useful when making POST requests.",[118,240,242],{"className":120,"code":241,"language":122,"meta":123,"style":123},"xhr.send([body]);\n",[103,243,244],{"__ignoreMap":123},[127,245,246,248,251],{"class":129,"line":130},[127,247,219],{"class":151},[127,249,250],{"class":147},"send",[127,252,253],{"class":151},"([body]);\n",[166,255,257],{"id":256},"xhrsetrequestheader","xhr.setRequestHeader()",[35,259,260,261,264,265,268,269,272],{},"This method is used to set HTTP headers for our request, such as ",[103,262,263],{},"Content-Type"," & ",[103,266,267],{},"Accept",". Similarly, we can use ",[103,270,271],{},"xhr.getResponseHeader()"," to get header values from our response.",[118,274,276],{"className":120,"code":275,"language":122,"meta":123,"style":123},"\u002F\u002F Set header for request\nxhr.setRequestHeader('Content-Type', 'application\u002Fjson');\n\n\u002F\u002F Get header for response\nxhr.getResponseHeader('Content-Type');\n",[103,277,278,284,308,314,320],{"__ignoreMap":123},[127,279,280],{"class":129,"line":130},[127,281,283],{"class":282},"sAwPA","\u002F\u002F Set header for request\n",[127,285,287,289,292,295,299,302,305],{"class":129,"line":286},2,[127,288,219],{"class":151},[127,290,291],{"class":147},"setRequestHeader",[127,293,294],{"class":151},"(",[127,296,298],{"class":297},"sU2Wk","'Content-Type'",[127,300,301],{"class":151},", ",[127,303,304],{"class":297},"'application\u002Fjson'",[127,306,307],{"class":151},");\n",[127,309,311],{"class":129,"line":310},3,[127,312,313],{"emptyLinePlaceholder":17},"\n",[127,315,317],{"class":129,"line":316},4,[127,318,319],{"class":282},"\u002F\u002F Get header for response\n",[127,321,323,325,328,330,332],{"class":129,"line":322},5,[127,324,219],{"class":151},[127,326,327],{"class":147},"getResponseHeader",[127,329,294],{"class":151},[127,331,298],{"class":297},[127,333,307],{"class":151},[166,335,337],{"id":336},"xhrabort","xhr.abort()",[35,339,340,341,343],{},"This method is useful when we want to cancel a request. Imagine a scenario where a user wants to cancel a request because it's taking too long. ",[103,342,337],{}," can be used to stop the request.",[118,345,347],{"className":120,"code":346,"language":122,"meta":123,"style":123},"xhr.abort();\n",[103,348,349],{"__ignoreMap":123},[127,350,351,353,356],{"class":129,"line":130},[127,352,219],{"class":151},[127,354,355],{"class":147},"abort",[127,357,152],{"class":151},[161,359,361],{"id":360},"properties","Properties",[166,363,365],{"id":364},"xhrresponse","xhr.response",[35,367,368,369,372],{},"This value contains the response body we receive from our request. ",[103,370,371],{},"xhr.responseText"," is also a similar property, which is used if our response is in a string format.",[118,374,376],{"className":120,"code":375,"language":122,"meta":123,"style":123},"const res = xhr.response;\n",[103,377,378],{"__ignoreMap":123},[127,379,380,382,385,387],{"class":129,"line":130},[127,381,134],{"class":133},[127,383,384],{"class":137}," res",[127,386,141],{"class":133},[127,388,389],{"class":151}," xhr.response;\n",[166,391,393],{"id":392},"xhrresponsetype","xhr.responseType",[35,395,396,397,399],{},"This is used to set the response type for our ",[103,398,158],{}," object. It can be in any one of these formats:",[401,402,403,413,418,423],"ul",{},[184,404,405,408,409,412],{},[103,406,407],{},"text","\u002F",[103,410,411],{},"\"\""," - default value",[184,414,415],{},[103,416,417],{},"json",[184,419,420],{},[103,421,422],{},"document",[184,424,425],{},[103,426,427],{},"blob",[118,429,431],{"className":120,"code":430,"language":122,"meta":123,"style":123},"xhr.responseType = 'json';\n",[103,432,433],{"__ignoreMap":123},[127,434,435,438,441,444],{"class":129,"line":130},[127,436,437],{"class":151},"xhr.responseType ",[127,439,440],{"class":133},"=",[127,442,443],{"class":297}," 'json'",[127,445,446],{"class":151},";\n",[166,448,450],{"id":449},"xhrreadystate","xhr.readyState",[35,452,453,454,457],{},"Our request changes states as it progresses, and the current state of our request can be accessed by this property. Its values range from 0 (initial state) to 4 (completed state). The event ",[103,455,456],{},"onreadystatechange"," can be used to detect whenever there is a change in state.",[118,459,461],{"className":120,"code":460,"language":122,"meta":123,"style":123},"xhr.onreadystatechange = function () {\n  if (xhr.readyState == 1) {\n    \u002F* request opened *\u002F\n  }\n  if (xhr.readyState == 2) {\n    \u002F* headers received *\u002F\n  }\n  if (xhr.readyState == 3) {\n    \u002F* response loading *\u002F\n  }\n  if (xhr.readyState == 4) {\n    \u002F* request complete *\u002F\n  }\n};\n",[103,462,463,477,494,499,504,517,523,528,542,548,553,567,573,578],{"__ignoreMap":123},[127,464,465,467,469,471,474],{"class":129,"line":130},[127,466,219],{"class":151},[127,468,456],{"class":147},[127,470,141],{"class":133},[127,472,473],{"class":133}," function",[127,475,476],{"class":151}," () {\n",[127,478,479,482,485,488,491],{"class":129,"line":286},[127,480,481],{"class":133},"  if",[127,483,484],{"class":151}," (xhr.readyState ",[127,486,487],{"class":133},"==",[127,489,490],{"class":137}," 1",[127,492,493],{"class":151},") {\n",[127,495,496],{"class":129,"line":310},[127,497,498],{"class":282},"    \u002F* request opened *\u002F\n",[127,500,501],{"class":129,"line":316},[127,502,503],{"class":151},"  }\n",[127,505,506,508,510,512,515],{"class":129,"line":322},[127,507,481],{"class":133},[127,509,484],{"class":151},[127,511,487],{"class":133},[127,513,514],{"class":137}," 2",[127,516,493],{"class":151},[127,518,520],{"class":129,"line":519},6,[127,521,522],{"class":282},"    \u002F* headers received *\u002F\n",[127,524,526],{"class":129,"line":525},7,[127,527,503],{"class":151},[127,529,531,533,535,537,540],{"class":129,"line":530},8,[127,532,481],{"class":133},[127,534,484],{"class":151},[127,536,487],{"class":133},[127,538,539],{"class":137}," 3",[127,541,493],{"class":151},[127,543,545],{"class":129,"line":544},9,[127,546,547],{"class":282},"    \u002F* response loading *\u002F\n",[127,549,551],{"class":129,"line":550},10,[127,552,503],{"class":151},[127,554,556,558,560,562,565],{"class":129,"line":555},11,[127,557,481],{"class":133},[127,559,484],{"class":151},[127,561,487],{"class":133},[127,563,564],{"class":137}," 4",[127,566,493],{"class":151},[127,568,570],{"class":129,"line":569},12,[127,571,572],{"class":282},"    \u002F* request complete *\u002F\n",[127,574,576],{"class":129,"line":575},13,[127,577,503],{"class":151},[127,579,581],{"class":129,"line":580},14,[127,582,583],{"class":151},"};\n",[161,585,587],{"id":586},"events","Events",[166,589,591],{"id":590},"xhronload","xhr.onload",[35,593,594,595,598,599,601],{},"This event is fired when our request is successful and the result is sent back. This can also be computed with ",[103,596,597],{},"xhr.onreadystatechange"," when ",[103,600,450],{}," is 4.",[118,603,605],{"className":120,"code":604,"language":122,"meta":123,"style":123},"xhr.onload = () => {\n  \u002F\u002F Code to run when results are ready\n};\n",[103,606,607,625,630],{"__ignoreMap":123},[127,608,609,611,614,616,619,622],{"class":129,"line":130},[127,610,219],{"class":151},[127,612,613],{"class":147},"onload",[127,615,141],{"class":133},[127,617,618],{"class":151}," () ",[127,620,621],{"class":133},"=>",[127,623,624],{"class":151}," {\n",[127,626,627],{"class":129,"line":286},[127,628,629],{"class":282},"  \u002F\u002F Code to run when results are ready\n",[127,631,632],{"class":129,"line":310},[127,633,583],{"class":151},[166,635,637],{"id":636},"xhronerror","xhr.onerror",[35,639,640],{},"This event is invoked when there is an error in our request, which could be due to network error or invalid configuration of our request.",[118,642,644],{"className":120,"code":643,"language":122,"meta":123,"style":123},"xhr.onerror = () => {\n  \u002F\u002F Code to run when request has failed\n};\n",[103,645,646,661,666],{"__ignoreMap":123},[127,647,648,650,653,655,657,659],{"class":129,"line":130},[127,649,219],{"class":151},[127,651,652],{"class":147},"onerror",[127,654,141],{"class":133},[127,656,618],{"class":151},[127,658,621],{"class":133},[127,660,624],{"class":151},[127,662,663],{"class":129,"line":286},[127,664,665],{"class":282},"  \u002F\u002F Code to run when request has failed\n",[127,667,668],{"class":129,"line":310},[127,669,583],{"class":151},[166,671,673],{"id":672},"xhronprogress","xhr.onprogress",[35,675,676,677,680,681,683,684,66,687,690],{},"This event is called repeatedly while our request is processed. It can be used to figure out the loading progress of a download or even a page load to let the user know how far along their request has been processed. An ",[56,678,679],{},"event"," parameter can be passed to ",[103,682,673],{}," and it has properties ",[103,685,686],{},"event.loaded",[103,688,689],{},"event.total",", which can be used to show the actual progress feedback.",[118,692,694],{"className":120,"code":693,"language":122,"meta":123,"style":123},"xhr.onprogress = (event) => {\n  \u002F\u002F Code to run while request is being processed\n  console.log(`Loaded ${event.loaded} of ${event.total}`);\n};\n",[103,695,696,718,723,758],{"__ignoreMap":123},[127,697,698,700,703,705,708,711,714,716],{"class":129,"line":130},[127,699,219],{"class":151},[127,701,702],{"class":147},"onprogress",[127,704,141],{"class":133},[127,706,707],{"class":151}," (",[127,709,679],{"class":710},"s9osk",[127,712,713],{"class":151},") ",[127,715,621],{"class":133},[127,717,624],{"class":151},[127,719,720],{"class":129,"line":286},[127,721,722],{"class":282},"  \u002F\u002F Code to run while request is being processed\n",[127,724,725,728,731,733,736,738,740,743,746,748,750,753,756],{"class":129,"line":310},[127,726,727],{"class":151},"  console.",[127,729,730],{"class":147},"log",[127,732,294],{"class":151},[127,734,735],{"class":297},"`Loaded ${",[127,737,679],{"class":151},[127,739,70],{"class":297},[127,741,742],{"class":151},"loaded",[127,744,745],{"class":297},"} of ${",[127,747,679],{"class":151},[127,749,70],{"class":297},[127,751,752],{"class":151},"total",[127,754,755],{"class":297},"}`",[127,757,307],{"class":151},[127,759,760],{"class":129,"line":316},[127,761,583],{"class":151},[161,763,765],{"id":764},"example","Example",[35,767,768,769,774,775,780,781,784],{},"We are going to use a simple fake online REST API called ",[39,770,773],{"href":771,"rel":772},"https:\u002F\u002Fjsonplaceholder.typicode.com\u002F",[43],"JSONPlaceholder"," to make example requests. We will use it to request and submit fake ",[39,776,779],{"href":777,"rel":778},"https:\u002F\u002Fjsonplaceholder.typicode.com\u002Fposts",[43],"posts",". According to the documentation for JSONPlaceholder, our path to the resource we want is ",[103,782,783],{},"https:\u002F\u002Fjsonplaceholder.typicode.com\u002F\u003Cendpoint>",", and there are several endpoints to choose from. For this demo, we'll use 'posts' as our endpoint. For this certain endpoint, we are going to receive and submit to an array of posts which are enclosed in objects. We also want our request to be asynchronous.",[35,786,787,790],{},[56,788,789],{},"Method: GET"," - is used to retrieve data.",[118,792,794],{"className":120,"code":793,"language":122,"meta":123,"style":123},"\u002F\u002F Our path to the resource\nlet reqURL = 'https:\u002F\u002Fjsonplaceholder.typicode.com\u002Fposts';\n\n\u002F\u002F 1. CREATE OUR XHR OBJECT\nconst xhr = new XMLHttpRequest();\n\n\u002F\u002F 2. SET OUR RESPONSE TYPE\nxhr.responseType = 'json';\n\n\u002F\u002F 3. CONFIGURE OUR REQUEST\nxhr.open('GET', reqURL, true);\n\n\u002F\u002F 4. SEND THE REQUEST\nxhr.send();\n\n\u002F\u002F 5. DECLARE FUNCTIONS BASED ON EVENTS\nxhr.onload = () => {\n  const data = xhr.response;\n  console.log(data);\n};\n\nxhr.onprogress = (event) => {\n  console.log(`Loaded ${event.loaded} of ${event.total}`);\n};\n\nxhr.onerror = () => {\n  console.log('Request failed!');\n};\n",[103,795,796,801,816,820,825,839,843,848,858,862,867,885,889,894,902,907,913,928,941,951,955,960,979,1008,1012,1017,1032,1046],{"__ignoreMap":123},[127,797,798],{"class":129,"line":130},[127,799,800],{"class":282},"\u002F\u002F Our path to the resource\n",[127,802,803,806,809,811,814],{"class":129,"line":286},[127,804,805],{"class":133},"let",[127,807,808],{"class":151}," reqURL ",[127,810,440],{"class":133},[127,812,813],{"class":297}," 'https:\u002F\u002Fjsonplaceholder.typicode.com\u002Fposts'",[127,815,446],{"class":151},[127,817,818],{"class":129,"line":310},[127,819,313],{"emptyLinePlaceholder":17},[127,821,822],{"class":129,"line":316},[127,823,824],{"class":282},"\u002F\u002F 1. CREATE OUR XHR OBJECT\n",[127,826,827,829,831,833,835,837],{"class":129,"line":322},[127,828,134],{"class":133},[127,830,138],{"class":137},[127,832,141],{"class":133},[127,834,144],{"class":133},[127,836,148],{"class":147},[127,838,152],{"class":151},[127,840,841],{"class":129,"line":519},[127,842,313],{"emptyLinePlaceholder":17},[127,844,845],{"class":129,"line":525},[127,846,847],{"class":282},"\u002F\u002F 2. SET OUR RESPONSE TYPE\n",[127,849,850,852,854,856],{"class":129,"line":530},[127,851,437],{"class":151},[127,853,440],{"class":133},[127,855,443],{"class":297},[127,857,446],{"class":151},[127,859,860],{"class":129,"line":544},[127,861,313],{"emptyLinePlaceholder":17},[127,863,864],{"class":129,"line":550},[127,865,866],{"class":282},"\u002F\u002F 3. CONFIGURE OUR REQUEST\n",[127,868,869,871,873,875,878,881,883],{"class":129,"line":555},[127,870,219],{"class":151},[127,872,222],{"class":147},[127,874,294],{"class":151},[127,876,877],{"class":297},"'GET'",[127,879,880],{"class":151},", reqURL, ",[127,882,195],{"class":137},[127,884,307],{"class":151},[127,886,887],{"class":129,"line":569},[127,888,313],{"emptyLinePlaceholder":17},[127,890,891],{"class":129,"line":575},[127,892,893],{"class":282},"\u002F\u002F 4. SEND THE REQUEST\n",[127,895,896,898,900],{"class":129,"line":580},[127,897,219],{"class":151},[127,899,250],{"class":147},[127,901,152],{"class":151},[127,903,905],{"class":129,"line":904},15,[127,906,313],{"emptyLinePlaceholder":17},[127,908,910],{"class":129,"line":909},16,[127,911,912],{"class":282},"\u002F\u002F 5. DECLARE FUNCTIONS BASED ON EVENTS\n",[127,914,916,918,920,922,924,926],{"class":129,"line":915},17,[127,917,219],{"class":151},[127,919,613],{"class":147},[127,921,141],{"class":133},[127,923,618],{"class":151},[127,925,621],{"class":133},[127,927,624],{"class":151},[127,929,931,934,937,939],{"class":129,"line":930},18,[127,932,933],{"class":133},"  const",[127,935,936],{"class":137}," data",[127,938,141],{"class":133},[127,940,389],{"class":151},[127,942,944,946,948],{"class":129,"line":943},19,[127,945,727],{"class":151},[127,947,730],{"class":147},[127,949,950],{"class":151},"(data);\n",[127,952,953],{"class":129,"line":5},[127,954,583],{"class":151},[127,956,958],{"class":129,"line":957},21,[127,959,313],{"emptyLinePlaceholder":17},[127,961,963,965,967,969,971,973,975,977],{"class":129,"line":962},22,[127,964,219],{"class":151},[127,966,702],{"class":147},[127,968,141],{"class":133},[127,970,707],{"class":151},[127,972,679],{"class":710},[127,974,713],{"class":151},[127,976,621],{"class":133},[127,978,624],{"class":151},[127,980,982,984,986,988,990,992,994,996,998,1000,1002,1004,1006],{"class":129,"line":981},23,[127,983,727],{"class":151},[127,985,730],{"class":147},[127,987,294],{"class":151},[127,989,735],{"class":297},[127,991,679],{"class":151},[127,993,70],{"class":297},[127,995,742],{"class":151},[127,997,745],{"class":297},[127,999,679],{"class":151},[127,1001,70],{"class":297},[127,1003,752],{"class":151},[127,1005,755],{"class":297},[127,1007,307],{"class":151},[127,1009,1010],{"class":129,"line":9},[127,1011,583],{"class":151},[127,1013,1015],{"class":129,"line":1014},25,[127,1016,313],{"emptyLinePlaceholder":17},[127,1018,1020,1022,1024,1026,1028,1030],{"class":129,"line":1019},26,[127,1021,219],{"class":151},[127,1023,652],{"class":147},[127,1025,141],{"class":133},[127,1027,618],{"class":151},[127,1029,621],{"class":133},[127,1031,624],{"class":151},[127,1033,1035,1037,1039,1041,1044],{"class":129,"line":1034},27,[127,1036,727],{"class":151},[127,1038,730],{"class":147},[127,1040,294],{"class":151},[127,1042,1043],{"class":297},"'Request failed!'",[127,1045,307],{"class":151},[127,1047,1049],{"class":129,"line":1048},28,[127,1050,583],{"class":151},[35,1052,1053],{},"As an output, we get a list of objects in the form of an array.",[118,1055,1057],{"className":120,"code":1056,"language":122,"meta":123,"style":123},"\u002F\u002F An example object from the array we get\n{\n    id: 1,\n    title: \"sunt aut facere repellat provident occaecati excepturi\",\n    body: \"quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit ...\",\n    userId: 1\n}\n",[103,1058,1059,1064,1069,1083,1095,1107,1117],{"__ignoreMap":123},[127,1060,1061],{"class":129,"line":130},[127,1062,1063],{"class":282},"\u002F\u002F An example object from the array we get\n",[127,1065,1066],{"class":129,"line":286},[127,1067,1068],{"class":151},"{\n",[127,1070,1071,1074,1077,1080],{"class":129,"line":310},[127,1072,1073],{"class":147},"    id",[127,1075,1076],{"class":151},": ",[127,1078,1079],{"class":137},"1",[127,1081,1082],{"class":151},",\n",[127,1084,1085,1088,1090,1093],{"class":129,"line":316},[127,1086,1087],{"class":147},"    title",[127,1089,1076],{"class":151},[127,1091,1092],{"class":297},"\"sunt aut facere repellat provident occaecati excepturi\"",[127,1094,1082],{"class":151},[127,1096,1097,1100,1102,1105],{"class":129,"line":322},[127,1098,1099],{"class":147},"    body",[127,1101,1076],{"class":151},[127,1103,1104],{"class":297},"\"quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit ...\"",[127,1106,1082],{"class":151},[127,1108,1109,1112,1114],{"class":129,"line":519},[127,1110,1111],{"class":147},"    userId",[127,1113,1076],{"class":151},[127,1115,1116],{"class":137},"1\n",[127,1118,1119],{"class":129,"line":525},[127,1120,1121],{"class":151},"}\n",[35,1123,1124,1127],{},[56,1125,1126],{},"Method: POST"," - is used to send new or updated data to the specified resource.",[118,1129,1131],{"className":120,"code":1130,"language":122,"meta":123,"style":123},"\u002F\u002F Our path to the resource\nlet reqUrl = 'https:\u002F\u002Fjsonplaceholder.typicode.com\u002Fposts';\n\n\u002F\u002F 1. CREATE OUR XHR OBJECT\nconst xhr = new XMLHttpRequest();\n\n\u002F\u002F 2. Configure a `POST` request\nxhr.open('POST', reqUrl);\n\n\u002F\u002F 3. Create a JSON 'post' object\nconst json_data = {\n  title: 'this is title',\n  body: 'this is body',\n  userId: 1\n};\n\n\u002F\u002F 4. Set the `Content-Type` header\nxhr.setRequestHeader('Content-Type', 'application\u002Fjson');\n\n\u002F\u002F 5. Pass a string form of our\n\u002F\u002F    json_data object to `send()`\nxhr.send(JSON.stringify(json_data));\n\n\u002F\u002F 6. DECLARE FUNCTIONS BASED ON EVENTS\nxhr.onload = () => {\n  const data = xhr.response;\n  console.log(data);\n};\n\nxhr.onprogress = (event) => {\n  console.log(`Uploaded ${event.loaded} of ${event.total}`);\n};\n\nxhr.onerror = () => {\n  console.log('Request failed!');\n};\n",[103,1132,1133,1137,1150,1154,1158,1172,1176,1181,1195,1199,1204,1215,1225,1235,1242,1246,1250,1255,1271,1275,1280,1285,1304,1308,1313,1327,1337,1345,1349,1354,1373,1403,1408,1413,1428,1441],{"__ignoreMap":123},[127,1134,1135],{"class":129,"line":130},[127,1136,800],{"class":282},[127,1138,1139,1141,1144,1146,1148],{"class":129,"line":286},[127,1140,805],{"class":133},[127,1142,1143],{"class":151}," reqUrl ",[127,1145,440],{"class":133},[127,1147,813],{"class":297},[127,1149,446],{"class":151},[127,1151,1152],{"class":129,"line":310},[127,1153,313],{"emptyLinePlaceholder":17},[127,1155,1156],{"class":129,"line":316},[127,1157,824],{"class":282},[127,1159,1160,1162,1164,1166,1168,1170],{"class":129,"line":322},[127,1161,134],{"class":133},[127,1163,138],{"class":137},[127,1165,141],{"class":133},[127,1167,144],{"class":133},[127,1169,148],{"class":147},[127,1171,152],{"class":151},[127,1173,1174],{"class":129,"line":519},[127,1175,313],{"emptyLinePlaceholder":17},[127,1177,1178],{"class":129,"line":525},[127,1179,1180],{"class":282},"\u002F\u002F 2. Configure a `POST` request\n",[127,1182,1183,1185,1187,1189,1192],{"class":129,"line":530},[127,1184,219],{"class":151},[127,1186,222],{"class":147},[127,1188,294],{"class":151},[127,1190,1191],{"class":297},"'POST'",[127,1193,1194],{"class":151},", reqUrl);\n",[127,1196,1197],{"class":129,"line":544},[127,1198,313],{"emptyLinePlaceholder":17},[127,1200,1201],{"class":129,"line":550},[127,1202,1203],{"class":282},"\u002F\u002F 3. Create a JSON 'post' object\n",[127,1205,1206,1208,1211,1213],{"class":129,"line":555},[127,1207,134],{"class":133},[127,1209,1210],{"class":137}," json_data",[127,1212,141],{"class":133},[127,1214,624],{"class":151},[127,1216,1217,1220,1223],{"class":129,"line":569},[127,1218,1219],{"class":151},"  title: ",[127,1221,1222],{"class":297},"'this is title'",[127,1224,1082],{"class":151},[127,1226,1227,1230,1233],{"class":129,"line":575},[127,1228,1229],{"class":151},"  body: ",[127,1231,1232],{"class":297},"'this is body'",[127,1234,1082],{"class":151},[127,1236,1237,1240],{"class":129,"line":580},[127,1238,1239],{"class":151},"  userId: ",[127,1241,1116],{"class":137},[127,1243,1244],{"class":129,"line":904},[127,1245,583],{"class":151},[127,1247,1248],{"class":129,"line":909},[127,1249,313],{"emptyLinePlaceholder":17},[127,1251,1252],{"class":129,"line":915},[127,1253,1254],{"class":282},"\u002F\u002F 4. Set the `Content-Type` header\n",[127,1256,1257,1259,1261,1263,1265,1267,1269],{"class":129,"line":930},[127,1258,219],{"class":151},[127,1260,291],{"class":147},[127,1262,294],{"class":151},[127,1264,298],{"class":297},[127,1266,301],{"class":151},[127,1268,304],{"class":297},[127,1270,307],{"class":151},[127,1272,1273],{"class":129,"line":943},[127,1274,313],{"emptyLinePlaceholder":17},[127,1276,1277],{"class":129,"line":5},[127,1278,1279],{"class":282},"\u002F\u002F 5. Pass a string form of our\n",[127,1281,1282],{"class":129,"line":957},[127,1283,1284],{"class":282},"\u002F\u002F    json_data object to `send()`\n",[127,1286,1287,1289,1291,1293,1296,1298,1301],{"class":129,"line":962},[127,1288,219],{"class":151},[127,1290,250],{"class":147},[127,1292,294],{"class":151},[127,1294,1295],{"class":137},"JSON",[127,1297,70],{"class":151},[127,1299,1300],{"class":147},"stringify",[127,1302,1303],{"class":151},"(json_data));\n",[127,1305,1306],{"class":129,"line":981},[127,1307,313],{"emptyLinePlaceholder":17},[127,1309,1310],{"class":129,"line":9},[127,1311,1312],{"class":282},"\u002F\u002F 6. DECLARE FUNCTIONS BASED ON EVENTS\n",[127,1314,1315,1317,1319,1321,1323,1325],{"class":129,"line":1014},[127,1316,219],{"class":151},[127,1318,613],{"class":147},[127,1320,141],{"class":133},[127,1322,618],{"class":151},[127,1324,621],{"class":133},[127,1326,624],{"class":151},[127,1328,1329,1331,1333,1335],{"class":129,"line":1019},[127,1330,933],{"class":133},[127,1332,936],{"class":137},[127,1334,141],{"class":133},[127,1336,389],{"class":151},[127,1338,1339,1341,1343],{"class":129,"line":1034},[127,1340,727],{"class":151},[127,1342,730],{"class":147},[127,1344,950],{"class":151},[127,1346,1347],{"class":129,"line":1048},[127,1348,583],{"class":151},[127,1350,1352],{"class":129,"line":1351},29,[127,1353,313],{"emptyLinePlaceholder":17},[127,1355,1357,1359,1361,1363,1365,1367,1369,1371],{"class":129,"line":1356},30,[127,1358,219],{"class":151},[127,1360,702],{"class":147},[127,1362,141],{"class":133},[127,1364,707],{"class":151},[127,1366,679],{"class":710},[127,1368,713],{"class":151},[127,1370,621],{"class":133},[127,1372,624],{"class":151},[127,1374,1376,1378,1380,1382,1385,1387,1389,1391,1393,1395,1397,1399,1401],{"class":129,"line":1375},31,[127,1377,727],{"class":151},[127,1379,730],{"class":147},[127,1381,294],{"class":151},[127,1383,1384],{"class":297},"`Uploaded ${",[127,1386,679],{"class":151},[127,1388,70],{"class":297},[127,1390,742],{"class":151},[127,1392,745],{"class":297},[127,1394,679],{"class":151},[127,1396,70],{"class":297},[127,1398,752],{"class":151},[127,1400,755],{"class":297},[127,1402,307],{"class":151},[127,1404,1406],{"class":129,"line":1405},32,[127,1407,583],{"class":151},[127,1409,1411],{"class":129,"line":1410},33,[127,1412,313],{"emptyLinePlaceholder":17},[127,1414,1416,1418,1420,1422,1424,1426],{"class":129,"line":1415},34,[127,1417,219],{"class":151},[127,1419,652],{"class":147},[127,1421,141],{"class":133},[127,1423,618],{"class":151},[127,1425,621],{"class":133},[127,1427,624],{"class":151},[127,1429,1431,1433,1435,1437,1439],{"class":129,"line":1430},35,[127,1432,727],{"class":151},[127,1434,730],{"class":147},[127,1436,294],{"class":151},[127,1438,1043],{"class":297},[127,1440,307],{"class":151},[127,1442,1444],{"class":129,"line":1443},36,[127,1445,583],{"class":151},[35,1447,1448],{},"Other than the couple of steps we have added, the general structure and process of making HTTP requests is very similar and perhaps even almost identical.",[35,1450,1451],{},"For our demo API, the object we 'posted' is not actually added to their database of posts. Since it is a fake API, the process is also faked, as the purpose of this code and the API is to demonstrate how requests work and to test code.",[35,1453,1454,1457],{},[56,1455,1456],{},"Method: PUT"," - is used to update or modify data at the specified path. This is almost identical to our POST method process. The only things that change are the path, the method name and the object we are updating. Other than these values, the rest is the same.",[118,1459,1461],{"className":120,"code":1460,"language":122,"meta":123,"style":123},"\u002F\u002F 1. Our path to the object we want to update\n\u002F\u002F    Notice the '\u002F1' added to the end\nlet reqUrl = \"https:\u002F\u002Fjsonplaceholder.typicode.com\u002Fposts\u002F1\";\n\n\u002F\u002F Configure a `PUT` request\nxhr.open('PUT', reqUrl);\n\n\u002F\u002F Create a JSON 'post' object\n\u002F\u002F We added 'id' so it can be used to\n\u002F\u002F update the entry with the specified id\nconst json_data = {\n    id: 1\n    title: 'this is updated title',\n    body: 'this is updated body',\n    userId: 1\n};\n",[103,1462,1463,1468,1473,1486,1490,1495,1508,1512,1517,1522,1527,1537,1544,1554,1564,1571],{"__ignoreMap":123},[127,1464,1465],{"class":129,"line":130},[127,1466,1467],{"class":282},"\u002F\u002F 1. Our path to the object we want to update\n",[127,1469,1470],{"class":129,"line":286},[127,1471,1472],{"class":282},"\u002F\u002F    Notice the '\u002F1' added to the end\n",[127,1474,1475,1477,1479,1481,1484],{"class":129,"line":310},[127,1476,805],{"class":133},[127,1478,1143],{"class":151},[127,1480,440],{"class":133},[127,1482,1483],{"class":297}," \"https:\u002F\u002Fjsonplaceholder.typicode.com\u002Fposts\u002F1\"",[127,1485,446],{"class":151},[127,1487,1488],{"class":129,"line":316},[127,1489,313],{"emptyLinePlaceholder":17},[127,1491,1492],{"class":129,"line":322},[127,1493,1494],{"class":282},"\u002F\u002F Configure a `PUT` request\n",[127,1496,1497,1499,1501,1503,1506],{"class":129,"line":519},[127,1498,219],{"class":151},[127,1500,222],{"class":147},[127,1502,294],{"class":151},[127,1504,1505],{"class":297},"'PUT'",[127,1507,1194],{"class":151},[127,1509,1510],{"class":129,"line":525},[127,1511,313],{"emptyLinePlaceholder":17},[127,1513,1514],{"class":129,"line":530},[127,1515,1516],{"class":282},"\u002F\u002F Create a JSON 'post' object\n",[127,1518,1519],{"class":129,"line":544},[127,1520,1521],{"class":282},"\u002F\u002F We added 'id' so it can be used to\n",[127,1523,1524],{"class":129,"line":550},[127,1525,1526],{"class":282},"\u002F\u002F update the entry with the specified id\n",[127,1528,1529,1531,1533,1535],{"class":129,"line":555},[127,1530,134],{"class":133},[127,1532,1210],{"class":137},[127,1534,141],{"class":133},[127,1536,624],{"class":151},[127,1538,1539,1542],{"class":129,"line":569},[127,1540,1541],{"class":151},"    id: ",[127,1543,1116],{"class":137},[127,1545,1546,1549,1552],{"class":129,"line":575},[127,1547,1548],{"class":151},"    title: ",[127,1550,1551],{"class":297},"'this is updated title'",[127,1553,1082],{"class":151},[127,1555,1556,1559,1562],{"class":129,"line":580},[127,1557,1558],{"class":151},"    body: ",[127,1560,1561],{"class":297},"'this is updated body'",[127,1563,1082],{"class":151},[127,1565,1566,1569],{"class":129,"line":904},[127,1567,1568],{"class":151},"    userId: ",[127,1570,1116],{"class":137},[127,1572,1573],{"class":129,"line":909},[127,1574,583],{"class":151},[35,1576,1577,1580],{},[56,1578,1579],{},"Method: DELETE"," - is used to delete the specified resource. Based on the documentation for the API, we use a different path to our resource to target and delete an entry.",[118,1582,1584],{"className":120,"code":1583,"language":122,"meta":123,"style":123},"\u002F\u002F 1. Our path to the object we want to delete\n\u002F\u002F    Notice the '\u002F1' added to the end\nlet reqUrl = 'https:\u002F\u002Fjsonplaceholder.typicode.com\u002Fposts\u002F1';\n\n\u002F\u002F 2. CREATE OUR XHR OBJECT\nconst xhr = new XMLHttpRequest();\n\n\u002F\u002F 3. Configure a `DELETE` request\nxhr.open('DELETE', reqUrl);\n\n\u002F\u002F 4. SEND THE REQUEST\nxhr.send();\n",[103,1585,1586,1591,1595,1608,1612,1617,1631,1635,1640,1653,1657,1661],{"__ignoreMap":123},[127,1587,1588],{"class":129,"line":130},[127,1589,1590],{"class":282},"\u002F\u002F 1. Our path to the object we want to delete\n",[127,1592,1593],{"class":129,"line":286},[127,1594,1472],{"class":282},[127,1596,1597,1599,1601,1603,1606],{"class":129,"line":310},[127,1598,805],{"class":133},[127,1600,1143],{"class":151},[127,1602,440],{"class":133},[127,1604,1605],{"class":297}," 'https:\u002F\u002Fjsonplaceholder.typicode.com\u002Fposts\u002F1'",[127,1607,446],{"class":151},[127,1609,1610],{"class":129,"line":316},[127,1611,313],{"emptyLinePlaceholder":17},[127,1613,1614],{"class":129,"line":322},[127,1615,1616],{"class":282},"\u002F\u002F 2. CREATE OUR XHR OBJECT\n",[127,1618,1619,1621,1623,1625,1627,1629],{"class":129,"line":519},[127,1620,134],{"class":133},[127,1622,138],{"class":137},[127,1624,141],{"class":133},[127,1626,144],{"class":133},[127,1628,148],{"class":147},[127,1630,152],{"class":151},[127,1632,1633],{"class":129,"line":525},[127,1634,313],{"emptyLinePlaceholder":17},[127,1636,1637],{"class":129,"line":530},[127,1638,1639],{"class":282},"\u002F\u002F 3. Configure a `DELETE` request\n",[127,1641,1642,1644,1646,1648,1651],{"class":129,"line":544},[127,1643,219],{"class":151},[127,1645,222],{"class":147},[127,1647,294],{"class":151},[127,1649,1650],{"class":297},"'DELETE'",[127,1652,1194],{"class":151},[127,1654,1655],{"class":129,"line":550},[127,1656,313],{"emptyLinePlaceholder":17},[127,1658,1659],{"class":129,"line":555},[127,1660,893],{"class":282},[127,1662,1663,1665,1667],{"class":129,"line":569},[127,1664,219],{"class":151},[127,1666,250],{"class":147},[127,1668,152],{"class":151},[35,1670,1671],{},"For real APIs, we can continue to create another GET request to verify that the data we wanted to delete is actually deleted. We can retrieve all the data and see if the object we sent a DELETE request on is in the database. If it's not, then the data is deleted.",[72,1673,69],{"id":1674},"fetch",[35,1676,1677,1678,1681,1682,1687],{},"Fetch is a promise-based web API. It is a modern alternative to XHR. I have explained in detail how the ",[103,1679,1680],{},"fetch()"," API works ",[39,1683,1686],{"href":1684,"rel":1685},"https:\u002F\u002Fminch.dev\u002Fblog\u002Fthe-javascript-fetch-api",[43],"here",". But let's redo the previous requests using fetch and see the difference.",[35,1689,1690],{},[56,1691,789],{},[118,1693,1695],{"className":120,"code":1694,"language":122,"meta":123,"style":123},"let reqUrl = 'https:\u002F\u002Fjsonplaceholder.typicode.com\u002Fposts';\n\nfetch(reqUrl)\n  .then((res) => res.json())\n  .then((data) => console.log(data))\n  .catch((error) => console.log(error));\n",[103,1696,1697,1709,1713,1720,1746,1769],{"__ignoreMap":123},[127,1698,1699,1701,1703,1705,1707],{"class":129,"line":130},[127,1700,805],{"class":133},[127,1702,1143],{"class":151},[127,1704,440],{"class":133},[127,1706,813],{"class":297},[127,1708,446],{"class":151},[127,1710,1711],{"class":129,"line":286},[127,1712,313],{"emptyLinePlaceholder":17},[127,1714,1715,1717],{"class":129,"line":310},[127,1716,1674],{"class":147},[127,1718,1719],{"class":151},"(reqUrl)\n",[127,1721,1722,1725,1728,1731,1734,1736,1738,1741,1743],{"class":129,"line":316},[127,1723,1724],{"class":151},"  .",[127,1726,1727],{"class":147},"then",[127,1729,1730],{"class":151},"((",[127,1732,1733],{"class":710},"res",[127,1735,713],{"class":151},[127,1737,621],{"class":133},[127,1739,1740],{"class":151}," res.",[127,1742,417],{"class":147},[127,1744,1745],{"class":151},"())\n",[127,1747,1748,1750,1752,1754,1757,1759,1761,1764,1766],{"class":129,"line":322},[127,1749,1724],{"class":151},[127,1751,1727],{"class":147},[127,1753,1730],{"class":151},[127,1755,1756],{"class":710},"data",[127,1758,713],{"class":151},[127,1760,621],{"class":133},[127,1762,1763],{"class":151}," console.",[127,1765,730],{"class":147},[127,1767,1768],{"class":151},"(data))\n",[127,1770,1771,1773,1776,1778,1781,1783,1785,1787,1789],{"class":129,"line":519},[127,1772,1724],{"class":151},[127,1774,1775],{"class":147},"catch",[127,1777,1730],{"class":151},[127,1779,1780],{"class":710},"error",[127,1782,713],{"class":151},[127,1784,621],{"class":133},[127,1786,1763],{"class":151},[127,1788,730],{"class":147},[127,1790,1791],{"class":151},"(error));\n",[35,1793,1794],{},[56,1795,1126],{},[118,1797,1799],{"className":120,"code":1798,"language":122,"meta":123,"style":123},"fetch(reqUrl, {\n  method: 'POST',\n  body: JSON.stringify({\n    title: 'this is title',\n    body: 'this is body',\n    userId: 1\n  }),\n  headers: {\n    'Content-type': 'application\u002Fjson'\n  }\n})\n  .then((res) => res.json())\n  .then((data) => console.log(data))\n  .catch((error) => console.log(error));\n",[103,1800,1801,1808,1817,1830,1838,1846,1852,1857,1862,1872,1876,1881,1901,1921],{"__ignoreMap":123},[127,1802,1803,1805],{"class":129,"line":130},[127,1804,1674],{"class":147},[127,1806,1807],{"class":151},"(reqUrl, {\n",[127,1809,1810,1813,1815],{"class":129,"line":286},[127,1811,1812],{"class":151},"  method: ",[127,1814,1191],{"class":297},[127,1816,1082],{"class":151},[127,1818,1819,1821,1823,1825,1827],{"class":129,"line":310},[127,1820,1229],{"class":151},[127,1822,1295],{"class":137},[127,1824,70],{"class":151},[127,1826,1300],{"class":147},[127,1828,1829],{"class":151},"({\n",[127,1831,1832,1834,1836],{"class":129,"line":316},[127,1833,1548],{"class":151},[127,1835,1222],{"class":297},[127,1837,1082],{"class":151},[127,1839,1840,1842,1844],{"class":129,"line":322},[127,1841,1558],{"class":151},[127,1843,1232],{"class":297},[127,1845,1082],{"class":151},[127,1847,1848,1850],{"class":129,"line":519},[127,1849,1568],{"class":151},[127,1851,1116],{"class":137},[127,1853,1854],{"class":129,"line":525},[127,1855,1856],{"class":151},"  }),\n",[127,1858,1859],{"class":129,"line":530},[127,1860,1861],{"class":151},"  headers: {\n",[127,1863,1864,1867,1869],{"class":129,"line":544},[127,1865,1866],{"class":297},"    'Content-type'",[127,1868,1076],{"class":151},[127,1870,1871],{"class":297},"'application\u002Fjson'\n",[127,1873,1874],{"class":129,"line":550},[127,1875,503],{"class":151},[127,1877,1878],{"class":129,"line":555},[127,1879,1880],{"class":151},"})\n",[127,1882,1883,1885,1887,1889,1891,1893,1895,1897,1899],{"class":129,"line":569},[127,1884,1724],{"class":151},[127,1886,1727],{"class":147},[127,1888,1730],{"class":151},[127,1890,1733],{"class":710},[127,1892,713],{"class":151},[127,1894,621],{"class":133},[127,1896,1740],{"class":151},[127,1898,417],{"class":147},[127,1900,1745],{"class":151},[127,1902,1903,1905,1907,1909,1911,1913,1915,1917,1919],{"class":129,"line":575},[127,1904,1724],{"class":151},[127,1906,1727],{"class":147},[127,1908,1730],{"class":151},[127,1910,1756],{"class":710},[127,1912,713],{"class":151},[127,1914,621],{"class":133},[127,1916,1763],{"class":151},[127,1918,730],{"class":147},[127,1920,1768],{"class":151},[127,1922,1923,1925,1927,1929,1931,1933,1935,1937,1939],{"class":129,"line":580},[127,1924,1724],{"class":151},[127,1926,1775],{"class":147},[127,1928,1730],{"class":151},[127,1930,1780],{"class":710},[127,1932,713],{"class":151},[127,1934,621],{"class":133},[127,1936,1763],{"class":151},[127,1938,730],{"class":147},[127,1940,1791],{"class":151},[35,1942,1943],{},[56,1944,1456],{},[118,1946,1948],{"className":120,"code":1947,"language":122,"meta":123,"style":123},"\u002F\u002F Our path to the object we want to update\nlet reqUrl = 'https:\u002F\u002Fjsonplaceholder.typicode.com\u002Fposts\u002F1';\n\nfetch(reqUrl, {\n  method: 'PUT',\n  body: JSON.stringify({\n    id: 1,\n    title: 'this is title',\n    body: 'this is body',\n    userId: 1\n  }),\n  headers: {\n    'Content-type': 'application\u002Fjson'\n  }\n})\n  .then((res) => res.json())\n  .then((data) => console.log(data))\n  .catch((error) => console.log(error));\n",[103,1949,1950,1955,1967,1971,1977,1985,1997,2005,2013,2021,2027,2031,2035,2043,2047,2051,2071,2091],{"__ignoreMap":123},[127,1951,1952],{"class":129,"line":130},[127,1953,1954],{"class":282},"\u002F\u002F Our path to the object we want to update\n",[127,1956,1957,1959,1961,1963,1965],{"class":129,"line":286},[127,1958,805],{"class":133},[127,1960,1143],{"class":151},[127,1962,440],{"class":133},[127,1964,1605],{"class":297},[127,1966,446],{"class":151},[127,1968,1969],{"class":129,"line":310},[127,1970,313],{"emptyLinePlaceholder":17},[127,1972,1973,1975],{"class":129,"line":316},[127,1974,1674],{"class":147},[127,1976,1807],{"class":151},[127,1978,1979,1981,1983],{"class":129,"line":322},[127,1980,1812],{"class":151},[127,1982,1505],{"class":297},[127,1984,1082],{"class":151},[127,1986,1987,1989,1991,1993,1995],{"class":129,"line":519},[127,1988,1229],{"class":151},[127,1990,1295],{"class":137},[127,1992,70],{"class":151},[127,1994,1300],{"class":147},[127,1996,1829],{"class":151},[127,1998,1999,2001,2003],{"class":129,"line":525},[127,2000,1541],{"class":151},[127,2002,1079],{"class":137},[127,2004,1082],{"class":151},[127,2006,2007,2009,2011],{"class":129,"line":530},[127,2008,1548],{"class":151},[127,2010,1222],{"class":297},[127,2012,1082],{"class":151},[127,2014,2015,2017,2019],{"class":129,"line":544},[127,2016,1558],{"class":151},[127,2018,1232],{"class":297},[127,2020,1082],{"class":151},[127,2022,2023,2025],{"class":129,"line":550},[127,2024,1568],{"class":151},[127,2026,1116],{"class":137},[127,2028,2029],{"class":129,"line":555},[127,2030,1856],{"class":151},[127,2032,2033],{"class":129,"line":569},[127,2034,1861],{"class":151},[127,2036,2037,2039,2041],{"class":129,"line":575},[127,2038,1866],{"class":297},[127,2040,1076],{"class":151},[127,2042,1871],{"class":297},[127,2044,2045],{"class":129,"line":580},[127,2046,503],{"class":151},[127,2048,2049],{"class":129,"line":904},[127,2050,1880],{"class":151},[127,2052,2053,2055,2057,2059,2061,2063,2065,2067,2069],{"class":129,"line":909},[127,2054,1724],{"class":151},[127,2056,1727],{"class":147},[127,2058,1730],{"class":151},[127,2060,1733],{"class":710},[127,2062,713],{"class":151},[127,2064,621],{"class":133},[127,2066,1740],{"class":151},[127,2068,417],{"class":147},[127,2070,1745],{"class":151},[127,2072,2073,2075,2077,2079,2081,2083,2085,2087,2089],{"class":129,"line":915},[127,2074,1724],{"class":151},[127,2076,1727],{"class":147},[127,2078,1730],{"class":151},[127,2080,1756],{"class":710},[127,2082,713],{"class":151},[127,2084,621],{"class":133},[127,2086,1763],{"class":151},[127,2088,730],{"class":147},[127,2090,1768],{"class":151},[127,2092,2093,2095,2097,2099,2101,2103,2105,2107,2109],{"class":129,"line":930},[127,2094,1724],{"class":151},[127,2096,1775],{"class":147},[127,2098,1730],{"class":151},[127,2100,1780],{"class":710},[127,2102,713],{"class":151},[127,2104,621],{"class":133},[127,2106,1763],{"class":151},[127,2108,730],{"class":147},[127,2110,1791],{"class":151},[35,2112,2113],{},[56,2114,1579],{},[118,2116,2118],{"className":120,"code":2117,"language":122,"meta":123,"style":123},"\u002F\u002F 1. Our path to the object we want to delete\nlet reqUrl = 'https:\u002F\u002Fjsonplaceholder.typicode.com\u002Fposts\u002F1';\n\nfetch(reqUrl, {\n  method: 'DELETE'\n});\n",[103,2119,2120,2124,2136,2140,2146,2153],{"__ignoreMap":123},[127,2121,2122],{"class":129,"line":130},[127,2123,1590],{"class":282},[127,2125,2126,2128,2130,2132,2134],{"class":129,"line":286},[127,2127,805],{"class":133},[127,2129,1143],{"class":151},[127,2131,440],{"class":133},[127,2133,1605],{"class":297},[127,2135,446],{"class":151},[127,2137,2138],{"class":129,"line":310},[127,2139,313],{"emptyLinePlaceholder":17},[127,2141,2142,2144],{"class":129,"line":316},[127,2143,1674],{"class":147},[127,2145,1807],{"class":151},[127,2147,2148,2150],{"class":129,"line":322},[127,2149,1812],{"class":151},[127,2151,2152],{"class":297},"'DELETE'\n",[127,2154,2155],{"class":129,"line":519},[127,2156,2157],{"class":151},"});\n",[35,2159,2160],{},"Fetch is a much cleaner and simpler way of doing what XHR allows us to do. Tracking progress is not yet supported in fetch. Due to that and many other reasons like browser support, XHR is still an important part of making requests.",[35,2162,2163,2164,2167,2168,2171],{},"There are also third-party tools such as ",[103,2165,2166],{},"axios"," and jQuery's ",[103,2169,2170],{},"$.ajax()",". These utilize XHR and\u002For Fetch API under the hood to provide a much cleaner way of making requests for developers.",[72,2173,2175],{"id":2174},"read-more","Read More",[401,2177,2178,2185,2192],{},[184,2179,2180],{},[39,2181,2184],{"href":2182,"rel":2183},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTTP\u002FOverview",[43],"An overview of HTTP by Mozilla",[184,2186,2187],{},[39,2188,2191],{"href":2189,"rel":2190},"https:\u002F\u002Fjavascript.info\u002Fxmlhttprequest",[43],"XMLHttpRequest by JavaScript.info",[184,2193,2194],{},[39,2195,2198],{"href":2196,"rel":2197},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTTP\u002FMethods",[43],"HTTP Request Methods by Mozilla",[2200,2201,2202],"style",{},"html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}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 pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}",{"title":123,"searchDepth":286,"depth":130,"links":2204},[2205,2206,2207],{"id":74,"depth":286,"text":75},{"id":1674,"depth":286,"text":69},{"id":2174,"depth":286,"text":2175},"How to Make HTTP Requests in JavaScript","md",{"tags":2211,"image":2215,"cover_image":2216,"canonical_url":2217},[2212,2213,2214],"javascript","web-apis","http-requests","\u002Fcontent\u002Fcover\u002Fhttp-requests-in-javascript.png","https:\u002F\u002Fraw.githubusercontent.com\u002Foneminch\u002Fportfolio\u002Fmain\u002Fpublic\u002Fcontent\u002Fcover\u002Fhttp-requests-in-javascript.png","https:\u002F\u002Fminch.dev\u002Fblog\u002Fhttp-requests-in-javascript","\u002Fblog\u002Fhttp-requests-in-javascript","2023-10-24",{"title":30,"description":2208},"blog\u002FHTTP Requests in JavaScript","vWnFV-pPCoOD8X4mXgIye32dB9QiE6f-RQEFYzaQmq0",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":2224},"\u003Cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"\u002F>",1788668238972]