{"componentChunkName":"component---node-modules-rocketseat-gatsby-theme-docs-core-src-templates-docs-query-js","path":"/advanced-js/async","result":{"data":{"mdx":{"id":"b741f21e-2720-5c15-83dc-5f588590140f","excerpt":"Asynchronous JavaScript Intro So far we've been writing HTML, CSS and JS in our computer and we open these files in our browser. The browser reads these files…","fields":{"slug":"/advanced-js/async/"},"frontmatter":{"title":"","description":null,"image":null,"disableTableOfContents":null},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", {\n    \"id\": \"asynchronous-javascript\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h1\",\n    \"href\": \"#asynchronous-javascript\",\n    \"aria-label\": \"asynchronous javascript permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Asynchronous JavaScript\"), mdx(\"h2\", {\n    \"id\": \"intro\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#intro\",\n    \"aria-label\": \"intro permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Intro\"), mdx(\"p\", null, \"So far we've been writing HTML, CSS and JS in our computer and we open these files in our browser. The browser reads these files and shows the results on the screen. We're building websites, but right now we're the only ones able to see them. The beauty of the internet is that we can see any public website!\"), mdx(\"h3\", {\n    \"id\": \"displaying-a-website\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#displaying-a-website\",\n    \"aria-label\": \"displaying a website permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Displaying a website\"), mdx(\"p\", null, \"A website is nothing more than an HTML file along with it's corresponding CSS and JS files, and maybe some others like images or fonts. So if we want to see Google on our browser, how do we get those files?\"), mdx(\"p\", null, \"When type a URL (like \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"https://www.google.com\"), \") in the search bar and we hit \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Enter\"), \", we're downloading the HTML, CSS and JS files that Google gives us and the browser prints the content on the screen.\\nIf we open the browser's inspector and navigate to the 'Network' tab, we can see all the files that the browser is downloading behind the scenes. It's downloading an HTML file first, along with a couple of CSS files, images, JS files, and more.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"960px\"\n    }\n  }, \"\\n      \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"58.333333333333336%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAABYlAAAWJQFJUiTwAAACh0lEQVQoz1WSS2/aUBSEWbWKQgjvhwHbYLDx+4l5mZBAqzZqumgitb+gm0r9/8uvx05TqYvRObr3ejxz5tQezzaPF4eHwuBpo/O8N7jfqhw3U/apwi4dsU2G7EpIf8gUDmvltQr2cnYpZnz96PH8JaWmTseoUwVVlapNUPUpmlRdanmuS2+ac4y5jmtqnA8Wp73FfWFzPq64HKXfmZwEny8xtZvbPiUazT5X123eX91W9V1ZbzrUWwNuOyPqzQFjZcxx65AnC9LAIIss8tQhDpb4zow8c6k12wNanYGQdjFXHlGSMzcswniNrS+w5c7qjZjIu/5YIRCiJPGJdzGJIEyEMPXw3CXnhw2121afkrTe6OAFCc8vP/j28p2fv35jOyHNRpdeZ4gqbyJNY52YBK5OGMxJ4iVJtBB1GqGn83AUy41mD8MMCdM7LDdntoywnDW5k7Fx1xLAPYulj9rqUaiaWA44FRFrIQtslcPGJfJmBI5KsQteFXZ6Y9pdBdOOyfcfcIMtT8Un1lbAaiABCdrybjIacZSPLqdMZrfCXU04bD0SGYNjTTjuw9cZlqSNZpeRojHRlvQVA0W1UIYabXHQkvtWRahQbDy2a5vIn+Hb00phIaT+m8KS8A2l/YaEUxfysVj0JQynrzDtjpi2h+Qyw1JhGpmiThUSnV3uirKI2J9zeLXcqxT+Q1tCKhULrgU3cl/18qPxZMrdPhBFfjW30urllMr6zHFMWamdWO71J9UM/4PMszzvSv+GdlcWX0IpSos7/2/aGvvc4XTwCaW/K2doyuBtJ8FxU1YSiuMmuF6GPrMxrRBrFVVnhiS9XK7Eoix2ZpPFpiy0UYVzlpCyVKwfUv4AC7BblBeJITMAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/aba1901d8f1e134c5da3a8273c295a6d/8ac56/google-homepage-inspected.webp 240w\", \"/static/aba1901d8f1e134c5da3a8273c295a6d/d3be9/google-homepage-inspected.webp 480w\", \"/static/aba1901d8f1e134c5da3a8273c295a6d/e46b2/google-homepage-inspected.webp 960w\", \"/static/aba1901d8f1e134c5da3a8273c295a6d/f992d/google-homepage-inspected.webp 1440w\", \"/static/aba1901d8f1e134c5da3a8273c295a6d/882b9/google-homepage-inspected.webp 1920w\", \"/static/aba1901d8f1e134c5da3a8273c295a6d/02ea9/google-homepage-inspected.webp 2168w\"],\n    \"sizes\": \"(max-width: 960px) 100vw, 960px\",\n    \"type\": \"image/webp\"\n  }), \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/aba1901d8f1e134c5da3a8273c295a6d/8ff5a/google-homepage-inspected.png 240w\", \"/static/aba1901d8f1e134c5da3a8273c295a6d/e85cb/google-homepage-inspected.png 480w\", \"/static/aba1901d8f1e134c5da3a8273c295a6d/d9199/google-homepage-inspected.png 960w\", \"/static/aba1901d8f1e134c5da3a8273c295a6d/07a9c/google-homepage-inspected.png 1440w\", \"/static/aba1901d8f1e134c5da3a8273c295a6d/29114/google-homepage-inspected.png 1920w\", \"/static/aba1901d8f1e134c5da3a8273c295a6d/5e485/google-homepage-inspected.png 2168w\"],\n    \"sizes\": \"(max-width: 960px) 100vw, 960px\",\n    \"type\": \"image/png\"\n  }), \"\\n          \", mdx(\"img\", {\n    parentName: \"picture\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/aba1901d8f1e134c5da3a8273c295a6d/d9199/google-homepage-inspected.png\",\n    \"alt\": \"Google's homepage\",\n    \"title\": \"Google's homepage\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  }), \"\\n        \"), \"\\n    \")), mdx(\"p\", null, \"This communication works a little bit like going to a restaurant. There, we would tell the waiter what we want, the waiter then goes to the kitchen and tells the cooks what the order is, and when the food is ready, the waiter brings the food to our table.\"), mdx(\"p\", null, \"In software development, we call this a \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"client/server architecture\"), \". The browser is the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"client\"), \", which makes a \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"request\"), \" to a computer somewhere else in the world that has the files we're looking for. This remote computer is called the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"server\"), \", because it 'serves' the files when anyone requests them. And the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"URL\"), \" tells the server what files do we want. A URL is the way we have of sending out a message from our computer to get some HTML files from a server. It has a different parts and can get complicated, but what we need to know for now is this:\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"800px\"\n    }\n  }, \"\\n      \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"31.25%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAGABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAEDBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHYtFkJ/8QAGBAAAgMAAAAAAAAAAAAAAAAAAQIAEBH/2gAIAQEAAQUCYlJlf//EABYRAAMAAAAAAAAAAAAAAAAAABARIf/aAAgBAwEBPwFQf//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABgQAAIDAAAAAAAAAAAAAAAAAAAhEBEx/9oACAEBAAY/Ak7Nj//EABoQAAICAwAAAAAAAAAAAAAAAAABEUEhMVH/2gAIAQEAAT8hjbFvRJNuxnp//9oADAMBAAIAAwAAABB/z//EABURAQEAAAAAAAAAAAAAAAAAAAEQ/9oACAEDAQE/EEASf//EABYRAQEBAAAAAAAAAAAAAAAAAAEQIf/aAAgBAgEBPxBMGf/EABwQAQACAQUAAAAAAAAAAAAAAAEAESExQYGR8f/aAAgBAQABPxBA2KLf0wwIFeq8nBtA85//2Q==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/4e10539aa43bab6be8db9b46d9b34167/8ac56/url-anatomy.webp 240w\", \"/static/4e10539aa43bab6be8db9b46d9b34167/d3be9/url-anatomy.webp 480w\", \"/static/4e10539aa43bab6be8db9b46d9b34167/d00b9/url-anatomy.webp 800w\"],\n    \"sizes\": \"(max-width: 800px) 100vw, 800px\",\n    \"type\": \"image/webp\"\n  }), \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/4e10539aa43bab6be8db9b46d9b34167/09b79/url-anatomy.jpg 240w\", \"/static/4e10539aa43bab6be8db9b46d9b34167/7cc5e/url-anatomy.jpg 480w\", \"/static/4e10539aa43bab6be8db9b46d9b34167/4b190/url-anatomy.jpg 800w\"],\n    \"sizes\": \"(max-width: 800px) 100vw, 800px\",\n    \"type\": \"image/jpeg\"\n  }), \"\\n          \", mdx(\"img\", {\n    parentName: \"picture\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/4e10539aa43bab6be8db9b46d9b34167/4b190/url-anatomy.jpg\",\n    \"alt\": \"URL anatomy\",\n    \"title\": \"URL anatomy\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  }), \"\\n        \"), \"\\n    \")), mdx(\"p\", null, \"The 'scheme' or 'protocol' is the language the two computers will use to talk to each other. If the client doesn't tell the server which protocol it's using, the server will get the request but won't 'understand' it.\"), mdx(\"p\", null, \"The 'domain' is which like the house address of the server. This is to make sure our request gets to the server that has the files we're interested in, and not any other computer in the world!\"), mdx(\"p\", null, \"The we have the 'path', which tells the server which files of the website we want. If there's no path, we're going to get the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"index.html\"), \" file. But if there's a path we can tell the server we want some other page of the website. For example, if we click the 'Privacy' button in Google's homepage, we will navigate to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"https://policies.google.com/privacy\"), \". This request we just made is telling the server: I want the \\\"Privacy\\\" page in the \\\"Policies\\\" section of Google.\"), mdx(\"p\", null, \"When we request a webpage, we'll get HTML files, but we can also get information we need in other formats.\"), mdx(\"h2\", {\n    \"id\": \"talking-to-the-server\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#talking-to-the-server\",\n    \"aria-label\": \"talking to the server permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Talking to the server\"), mdx(\"p\", null, \"To make requests from our JavaScript, we can use a simple \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Network_requests\"\n  }, \"built-in function\"), \": \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"fetch()\"), \".\\nThe first way to use it is by passing it a URL as it's argument. Here's a code example:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"const response = await fetch(\\\"https://pokeapi.co/api/v2/pokemon/pikachu\\\");\\nconst data = await response.json();\\nconsole.log(data);\\n\")), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"When we get and send information to and from a server, we usually use a file format called JSON. It's a text file that represents strings, numbers, booleans, objects & arrays. Many programming languages can read and write these type of files, which makes them a standard.\")), mdx(\"p\", null, \"Someone in the world made a server with Pokemon information, and made it public so that anyone can use it. You can take a look at the documentation \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://pokeapi.co/\"\n  }, \"here\"), \", these are the instructions to use it. In the code above, we are asking the server (\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://pokeapi.co\"\n  }, \"https://pokeapi.co\"), \"), for the version 2 (/api/v2) of the Pokemon named Pikachu (/pokemon/pikachu).\"), mdx(\"p\", null, \"In the first line, JS \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"fetch()\"), \" function will make the request, and if everything works, we will get a JSON file to the browser with the information.\"), mdx(\"p\", null, \"The second line will take that JSON file and convert it to a JavaScript object for us to work with. As you can see, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"response\"), \" itself is an object with more properties and methods, but using the method \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"json()\"), \" it's more than enough.\\nWe can also see a new keyword: \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"await\")), mdx(\"h3\", {\n    \"id\": \"asynchrony\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#asynchrony\",\n    \"aria-label\": \"asynchrony permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Asynchrony\"), mdx(\"p\", null, \"All the code that we've writen so far is \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"synchronous\"), \" code. This means that the computer reads it top to bottom and it executes it in order. You might call the function and declare it later, or a loop might repeat some code. But it never stops or waits.\"), mdx(\"p\", null, \"A \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"request\"), \" (asking for data) to a server, takes some time, sometimes a lot. First the request has to leave our computer and travel to the server, wherever it might be in the world. Then the server has to read our request, process the information and send a \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"response\"), \" (the information we asked for).\"), mdx(\"p\", null, \"If our website was completely blocked everytime this happens, it might be slow and hard to use. That's why JavaScript allows you to write code that won't block everything else: \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"asynchronous\"), \" code.\"), mdx(\"h4\", {\n    \"id\": \"promises\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h4\",\n    \"href\": \"#promises\",\n    \"aria-label\": \"promises permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Promises\"), mdx(\"p\", null, \"To do this, we can use JS \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises\"\n  }, \"Promises\"), \". These are special objects that represent asynchronous operations. A Promise will be in one of these states: pending, fullfilled or rejected.\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Pending: the computer is executing the asynchronous task.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Fullfilled: the task has been completed and it was successful.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Rejected: the task has been completed but it errored.\")), mdx(\"p\", null, \"If we execute this code, we'll see an error saying that the method \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"json()\"), \" doesn't exist. Why?\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"const response = fetch(\\\"https://pokeapi.co/api/v2/pokemon/pikachu\\\");\\nconst data = response.json();\\nconsole.log(data);\\n\")), mdx(\"p\", null, \"The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"fetch()\"), \" function will return a promise, but if we don't use the word \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"await\"), \", the computer will not wait for that promise to resolve (success or error). That \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"pending\"), \" promise (unresolved) doesn't have the information from the server yet, so we can't use it.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"960px\"\n    }\n  }, \"\\n      \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"71.25%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAABYlAAAWJQFJUiTwAAABhElEQVQ4y42T627CMAyF+/4vxw+kwYACQi1oXFSgLS3l4vmz5ihUbJolk4Ykx8cnJ8ntdpPVaiW73U7W67Usl0vJ81yI5/NpGYfPu66Tw+Egp9NJHo9HWEv4uVwukqapDAYDmUwmtjk+HIP6d9M0RmSz2QikAiDoLFZVJXVdW16v15eqfbZ91vF/SVmWcjweZT6fy2g0shHGFIg3v0uKknGxBDB0WCwWMh6PTT8Yb7dbKwTb/4a17BN0c1beLsD7/d50pRhFWLvf77aGPHTTtm3QMTmfz8YkzzKZTqd20zBmswebAWJEokz3MjogCU5oGXapavehLDJtmTYBfWcbZ+5O8FYDIIdbzUqBS/Vip/Q5EFshTgekTV9HggAYNFSwRluRH/3eWYLgII+AsSgKS76RwABr7Z9JoQy/VHRa5QWgS8wKxlwQ6307vdwyGuL4T9WPHA6H5kWviI244dlsZrf8G1DwIRqiCemGZmROO7B1Pfsm7mv74sM4OMgbja3z17OL4xtfREG722cZ9QAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/a5e260b5837fd12ace2df9634c64a2b6/8ac56/async_bad.webp 240w\", \"/static/a5e260b5837fd12ace2df9634c64a2b6/d3be9/async_bad.webp 480w\", \"/static/a5e260b5837fd12ace2df9634c64a2b6/e46b2/async_bad.webp 960w\", \"/static/a5e260b5837fd12ace2df9634c64a2b6/f992d/async_bad.webp 1440w\", \"/static/a5e260b5837fd12ace2df9634c64a2b6/ea6ef/async_bad.webp 1746w\"],\n    \"sizes\": \"(max-width: 960px) 100vw, 960px\",\n    \"type\": \"image/webp\"\n  }), \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/a5e260b5837fd12ace2df9634c64a2b6/8ff5a/async_bad.png 240w\", \"/static/a5e260b5837fd12ace2df9634c64a2b6/e85cb/async_bad.png 480w\", \"/static/a5e260b5837fd12ace2df9634c64a2b6/d9199/async_bad.png 960w\", \"/static/a5e260b5837fd12ace2df9634c64a2b6/07a9c/async_bad.png 1440w\", \"/static/a5e260b5837fd12ace2df9634c64a2b6/baa75/async_bad.png 1746w\"],\n    \"sizes\": \"(max-width: 960px) 100vw, 960px\",\n    \"type\": \"image/png\"\n  }), \"\\n          \", mdx(\"img\", {\n    parentName: \"picture\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/a5e260b5837fd12ace2df9634c64a2b6/d9199/async_bad.png\",\n    \"alt\": \"Async bad\",\n    \"title\": \"Async bad\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  }), \"\\n        \"), \"\\n    \")), mdx(\"p\", null, \"If we use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"await\"), \" keyword, the computer will 'wait' for the request to be completed.\\nIf you notice, we have to wait for the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"json()\"), \" method as well. This is because computers break down in smaller 'chunks' to send them over the internet. The promise returned by \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"fetch()\"), \" will resolve when the first 'chunks' of the response arrive. The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"json()\"), \" method returns a promise that will resolve when every chunk has arrived and we have all the data. (Don't worry about this. Just remember to await the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"json()\"), \")\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"960px\"\n    }\n  }, \"\\n      \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"75%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAABYlAAAWJQFJUiTwAAABX0lEQVQ4y5WT646CQAyFef9XI4bEH4pG4yUoCFHxCirQ3a9JyYTorjQZ6PRyOj3T8eRXXq+XPB4PaZpGF3pVVbhaW1e6Ntt7fK7Xq6zXa5nNZhIEgUwmE7W9A3T35KxWK7nf763PM+fz+ZTFYqHLDfhr3W43Lex249V1rQA4LpeLrvP5rDZ8fUQB4QuA/X4vg8FAfN+XJEm0QBzHcjweJU1TtW23Wy3kFj6dTqpzWuUQ1KIo2gD+gGGjFfwUA/xwOOiFobscEwdweyl9BK53u13Ls4kV8GxMyrLUYHTb22nn87mEYah/KKAT7MSwrEMFJJnjYiRhNBrpHk5oDTuX0x0fAzJQZlkBCSYZkCiKZLPZqM4JurfsjszHW3YNkEu1/0A+zWXLofEHPxAOMKRbG59O9E48kvI8l+VyKePxWKbTqQyHQ20ffnsD2hMClHlj1rIsUx7dJ/U14DfPqY/8AMVHlDXlq6/jAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/362b21b0333975443b6648ab926eef31/8ac56/async_good.webp 240w\", \"/static/362b21b0333975443b6648ab926eef31/d3be9/async_good.webp 480w\", \"/static/362b21b0333975443b6648ab926eef31/e46b2/async_good.webp 960w\", \"/static/362b21b0333975443b6648ab926eef31/f992d/async_good.webp 1440w\", \"/static/362b21b0333975443b6648ab926eef31/e33fd/async_good.webp 1544w\"],\n    \"sizes\": \"(max-width: 960px) 100vw, 960px\",\n    \"type\": \"image/webp\"\n  }), \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/362b21b0333975443b6648ab926eef31/8ff5a/async_good.png 240w\", \"/static/362b21b0333975443b6648ab926eef31/e85cb/async_good.png 480w\", \"/static/362b21b0333975443b6648ab926eef31/d9199/async_good.png 960w\", \"/static/362b21b0333975443b6648ab926eef31/07a9c/async_good.png 1440w\", \"/static/362b21b0333975443b6648ab926eef31/c0566/async_good.png 1544w\"],\n    \"sizes\": \"(max-width: 960px) 100vw, 960px\",\n    \"type\": \"image/png\"\n  }), \"\\n          \", mdx(\"img\", {\n    parentName: \"picture\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/362b21b0333975443b6648ab926eef31/d9199/async_good.png\",\n    \"alt\": \"Async good\",\n    \"title\": \"Async good\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  }), \"\\n        \"), \"\\n    \")), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"If we're writing the word \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"await\"), \" inside a function, we must write the word async at the function declaration, so that everyone knows that the function will run async code\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"async function myRequest() {\\n    const res = await fetch(...);\\n    ...\\n}\\n\\n// OR\\n\\nconst myRequest = async () => {\\n    const res = await fetch(...);\\n    ...\\n}\\n\")), mdx(\"h3\", {\n    \"id\": \"http\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#http\",\n    \"aria-label\": \"http permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"HTTP\"), mdx(\"p\", null, \"HTTP (Hypertext Transfer Protocol) is one of the languages there are to comunicate with servers, and the one we're going to use.\"), mdx(\"p\", null, \"Along with URLs, there's another things we can use to talk to the server.\"), mdx(\"h4\", {\n    \"id\": \"http-methods\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h4\",\n    \"href\": \"#http-methods\",\n    \"aria-label\": \"http methods permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"HTTP methods\"), mdx(\"h5\", {\n    \"id\": \"get\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h5\",\n    \"href\": \"#get\",\n    \"aria-label\": \"get permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"GET\"), mdx(\"p\", null, \"Imagine we're on YouTube. We go to the comment section of a video and the browser makes a request to the server to get all the comments for that video. This is a GET request. We make the request and say we want to GET the comments for this video.\"), mdx(\"h5\", {\n    \"id\": \"post\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h5\",\n    \"href\": \"#post\",\n    \"aria-label\": \"post permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"POST\"), mdx(\"p\", null, \"What if we write a new comment? We click \\\"Send\\\" and the browser makes a POST request to the server. POST is always used to create a new item. In the request we have to attach the information that we want to store. This is called the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"body\"), \" of a request. It would look something like:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"const newComment = {\\n    user: \\\"Zainab Al-Sayed\\\",\\n    text: \\\"This is a great video!\\\",\\n};\\n\\nconst configuration = {\\n    method: \\\"POST\\\",\\n    headers: { \\\"Content-Type\\\": \\\"application/json\\\" },\\n    body: JSON.stringify(newComment),\\n};\\n\\nfetch(\\\"https://example.com/api/endpoint\\\", configuration);\\n\")), mdx(\"p\", null, \"Let's break this down:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"First we have the new comment. This is the data we want to store in our server.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Then we have a configuration object with additional information about the request we want to make.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Lastly we have the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"fetch()\"), \" function, with the URL we want and the configuration.\")), mdx(\"p\", null, \"The configuration object:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Method: this indicates what type of action we want to take.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Headers: there's many headers in requests and responses. This is information about where it comes from, where it goes, user authorization, and so on. In this case we're saying that the type of content we're sending is a JSON file.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Body: the content that we want the server to store. Our \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"newComment\"), \" variable is a JavaScript object, but JSONs are text files, so we have to convert our object to text using \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"JSON.stringify()\"), \".\")), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"This can get confusing. There's libraries like \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://axios-http.com/docs/post_example\"\n  }, \"Axios\"), \" that simplify this process a little.\")), mdx(\"h5\", {\n    \"id\": \"putpatch\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h5\",\n    \"href\": \"#putpatch\",\n    \"aria-label\": \"putpatch permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"PUT/PATCH\"), mdx(\"p\", null, \"They work like a POST request, but are meant to update already stored data.\"), mdx(\"p\", null, \"Imagine we're on YouTube again. We go to settings and we can see our user info. Our user has already been created, but we want to change our email address. This would be made with a PUT or a PATCH request.\"), mdx(\"h5\", {\n    \"id\": \"delete\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h5\",\n    \"href\": \"#delete\",\n    \"aria-label\": \"delete permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"DELETE\"), mdx(\"p\", null, \"Pretty self-explanatory. If we want to delete a user, comment, video, etc. this is what we use.\"), mdx(\"h4\", {\n    \"id\": \"query-params\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h4\",\n    \"href\": \"#query-params\",\n    \"aria-label\": \"query params permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Query params\"), mdx(\"p\", null, \"Imagine we're on Goggle and we search for 'cute cats'. We have to make a GET request (to get the search results) but GET requests don't have a body to pass information. We can use query params for this like:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \"https://www.google.com/search?q=cute+cats\\n\")), mdx(\"p\", null, \"You can see that we're reaching the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"/search\"), \" endpoint and after the '?' sign we have \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"q=cute+cats\"), \". 'q' is short for 'query'. They could have called it anything else, but it's a common standard.\"), mdx(\"p\", null, \"We can pass other values like pagination for example. We might have millions of results with that search and if they try to send all of them at once everything would break. So we could do something like \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"?q=cute+cats&limit=20\"), \", to search for the words 'cute cats' and get the first 20 results of the search.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"The 'q' does work in google, but the 'limit' param is an imaginary example. It's up to whoever designs the server to name the parameters it will accept.\")), mdx(\"h2\", {\n    \"id\": \"extra\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#extra\",\n    \"aria-label\": \"extra permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Extra\"), mdx(\"h3\", {\n    \"id\": \"thencatch\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#thencatch\",\n    \"aria-label\": \"thencatch permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Then/catch\"), mdx(\"p\", null, \"This is another way of handling asynchrony. \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"then\"), \" will wait for the promise to be resolved and will execute the function passed as an argument. the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"catch\"), \" function will run if the async operation throws an error.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"fetch(\\\"https://api.example.com/data\\\")\\n    .then((response) => {\\n        return response.json(); // Parse the JSON from the response\\n    })\\n    .then((data) => {\\n        console.log(\\\"Data received:\\\", data); // Handle the data\\n    })\\n    .catch((error) => {\\n        console.error(\\\"There was a problem with the fetch operation:\\\", error);\\n    });\\n\")), mdx(\"h3\", {\n    \"id\": \"single-page-apps\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#single-page-apps\",\n    \"aria-label\": \"single page apps permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Single Page Apps\"), mdx(\"p\", null, \"Back in the 90's, the only way the web worked was:\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"The user typed a URL on the search bar (\", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"http://www.website.com\"\n  }, \"www.website.com\"), \")\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"The website's home page HTML file was downloaded and rendered on screen.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"The user clicked a link to another page (\", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"http://www.website.com/about-us\"\n  }, \"www.website.com/about-us\"), \")\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Again, the corresponding page's HTML file was downloaded and rendered on screen.\\n...\")), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"960px\"\n    }\n  }, \"\\n      \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"40.833333333333336%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAABYlAAAWJQFJUiTwAAAA4ElEQVQoz22R6QqEMAyEff9H9JeioAjifR9Zviwjxd1AmjadTKZptK6rDcNgy7LYcRzu5Iiybdts3/fnzJ6avu99j4PBIxYuibLrumyeZycex9GSJLEsy2yaJsdKAGfZfd9fQi7ehjqIiKjI89zKsvQcjYghkUQ4ISrO87Q0TS2OY2vb1kEUAlKR9hoBOZGJEC5XyEXXde4k1Q1HDU/Uc8HTTI1ChQ/h21DcNI2rrarK51cUhdV17XmIw+f+PFkJHBCzQxHE/CCKaKyzREihRuIKWUIHjIcz+/dpYN51NPsAFV5x1b8Gfy8AAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/694d403c9a1171e86d84d4442ed1d732/8ac56/client-server-90s.webp 240w\", \"/static/694d403c9a1171e86d84d4442ed1d732/d3be9/client-server-90s.webp 480w\", \"/static/694d403c9a1171e86d84d4442ed1d732/e46b2/client-server-90s.webp 960w\", \"/static/694d403c9a1171e86d84d4442ed1d732/f992d/client-server-90s.webp 1440w\", \"/static/694d403c9a1171e86d84d4442ed1d732/dc596/client-server-90s.webp 1712w\"],\n    \"sizes\": \"(max-width: 960px) 100vw, 960px\",\n    \"type\": \"image/webp\"\n  }), \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/694d403c9a1171e86d84d4442ed1d732/8ff5a/client-server-90s.png 240w\", \"/static/694d403c9a1171e86d84d4442ed1d732/e85cb/client-server-90s.png 480w\", \"/static/694d403c9a1171e86d84d4442ed1d732/d9199/client-server-90s.png 960w\", \"/static/694d403c9a1171e86d84d4442ed1d732/07a9c/client-server-90s.png 1440w\", \"/static/694d403c9a1171e86d84d4442ed1d732/56caf/client-server-90s.png 1712w\"],\n    \"sizes\": \"(max-width: 960px) 100vw, 960px\",\n    \"type\": \"image/png\"\n  }), \"\\n          \", mdx(\"img\", {\n    parentName: \"picture\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/694d403c9a1171e86d84d4442ed1d732/d9199/client-server-90s.png\",\n    \"alt\": \"Client/server 90s\",\n    \"title\": \"Client/server 90s\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  }), \"\\n        \"), \"\\n    \")), mdx(\"p\", null, \"Then later websites got more complex, storing user data in a database in the server and generating HTML with that data which would then be sent to the client, which would render the files.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"960px\"\n    }\n  }, \"\\n      \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"34.583333333333336%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAyklEQVQoz3WSyw6FIAxE+f9fdO9CokjwCUpvTpMacqNNJtjSTodWt22beO+FE+z7LjlnebP7viWEoDiOQ3PBPM8aW9dVHBegNfxSiiYPwyDLsqh/nudDQlNAbBxHmaZJUkriCGDXdSkwOgG6dl0nfd8rKQWcLWKM2gxTQlOHErpgKICcEVAEOWo4EUCcfL4BT8bXJxOotep8gHXikkJOSMmjOXc8kbkjAIXGQZ57W8DXUlBN4f+i2lE9SzH55lPYwgjtb2jnaJsn/gMqBiGPeCk9LAAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/adc0dcb2e0c21458ab54c96c38159eed/8ac56/client-server-php.webp 240w\", \"/static/adc0dcb2e0c21458ab54c96c38159eed/d3be9/client-server-php.webp 480w\", \"/static/adc0dcb2e0c21458ab54c96c38159eed/e46b2/client-server-php.webp 960w\", \"/static/adc0dcb2e0c21458ab54c96c38159eed/f992d/client-server-php.webp 1440w\", \"/static/adc0dcb2e0c21458ab54c96c38159eed/882b9/client-server-php.webp 1920w\", \"/static/adc0dcb2e0c21458ab54c96c38159eed/c76db/client-server-php.webp 2016w\"],\n    \"sizes\": \"(max-width: 960px) 100vw, 960px\",\n    \"type\": \"image/webp\"\n  }), \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/adc0dcb2e0c21458ab54c96c38159eed/8ff5a/client-server-php.png 240w\", \"/static/adc0dcb2e0c21458ab54c96c38159eed/e85cb/client-server-php.png 480w\", \"/static/adc0dcb2e0c21458ab54c96c38159eed/d9199/client-server-php.png 960w\", \"/static/adc0dcb2e0c21458ab54c96c38159eed/07a9c/client-server-php.png 1440w\", \"/static/adc0dcb2e0c21458ab54c96c38159eed/29114/client-server-php.png 1920w\", \"/static/adc0dcb2e0c21458ab54c96c38159eed/b8471/client-server-php.png 2016w\"],\n    \"sizes\": \"(max-width: 960px) 100vw, 960px\",\n    \"type\": \"image/png\"\n  }), \"\\n          \", mdx(\"img\", {\n    parentName: \"picture\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/adc0dcb2e0c21458ab54c96c38159eed/d9199/client-server-php.png\",\n    \"alt\": \"Client/server php\",\n    \"title\": \"Client/server php\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  }), \"\\n        \"), \"\\n    \")), mdx(\"p\", null, \"But with JavaScript and the browser getting more features, websites got more complex and started being more interactive. People started dynamically changing the HTML, without the need to load a new HTML page each time the user interacts (as we've seen in the DOM manipulation section of the course). This eventually grew into what we call SPAs (Single Page Applications). This is an architecture we only get one index.html page at the beginning and everything we see on the page is done through Javascript (which we'll do when we start using React).\"), mdx(\"p\", null, \"In this last scenario, we still need information from the server. For example, if we log into Facebook, we see our own username, our profile picture, our friend's posts, etc. That is all information stored somewhere that's not our computer. And with JavaScript, we can get ask the information we need from the server.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"960px\"\n    }\n  }, \"\\n      \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"34.583333333333336%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAABYlAAAWJQFJUiTwAAAA5ElEQVQoz22R2YqFQAxE/f//80nfFNy3677mcmrIIMM0FIltUlVJB+u62rIsdhyHsO+7nedpfu77VnyeR/fjONo8z6rbtk2Ag0h/MAyDTdOkRsAlAhQURWFRFFnTNCL5fD6q5R+1iJCnaWplWepf8HbjTlyxqipr21aEOELo7/HJruv6IUQV9iRJLM9zuaARIUj7vldOE9/kkPtqiAh3Xae+AFYSRiKyIyLIsszCMFQDdYA6RHxVANJfh/+N7HvCcRzHVte1mnBPRJTcHxQydipCLt4v5g9CEfDXJXeCt1tA7pN9ARCNHxbrcbbkAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"picture\", {\n    parentName: \"span\"\n  }, \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/5809ce31836a4b020a70dda1fd57fd53/8ac56/client-server-json.webp 240w\", \"/static/5809ce31836a4b020a70dda1fd57fd53/d3be9/client-server-json.webp 480w\", \"/static/5809ce31836a4b020a70dda1fd57fd53/e46b2/client-server-json.webp 960w\", \"/static/5809ce31836a4b020a70dda1fd57fd53/f992d/client-server-json.webp 1440w\", \"/static/5809ce31836a4b020a70dda1fd57fd53/882b9/client-server-json.webp 1920w\", \"/static/5809ce31836a4b020a70dda1fd57fd53/c76db/client-server-json.webp 2016w\"],\n    \"sizes\": \"(max-width: 960px) 100vw, 960px\",\n    \"type\": \"image/webp\"\n  }), \"\\n          \", mdx(\"source\", {\n    parentName: \"picture\",\n    \"srcSet\": [\"/static/5809ce31836a4b020a70dda1fd57fd53/8ff5a/client-server-json.png 240w\", \"/static/5809ce31836a4b020a70dda1fd57fd53/e85cb/client-server-json.png 480w\", \"/static/5809ce31836a4b020a70dda1fd57fd53/d9199/client-server-json.png 960w\", \"/static/5809ce31836a4b020a70dda1fd57fd53/07a9c/client-server-json.png 1440w\", \"/static/5809ce31836a4b020a70dda1fd57fd53/29114/client-server-json.png 1920w\", \"/static/5809ce31836a4b020a70dda1fd57fd53/b8471/client-server-json.png 2016w\"],\n    \"sizes\": \"(max-width: 960px) 100vw, 960px\",\n    \"type\": \"image/png\"\n  }), \"\\n          \", mdx(\"img\", {\n    parentName: \"picture\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/5809ce31836a4b020a70dda1fd57fd53/d9199/client-server-json.png\",\n    \"alt\": \"Client/server json\",\n    \"title\": \"Client/server json\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  }), \"\\n        \"), \"\\n    \")));\n}\n;\nMDXContent.isMDXComponent = true;","headings":[{"depth":1,"value":"Asynchronous JavaScript"},{"depth":2,"value":"Intro"},{"depth":3,"value":"Displaying a website"},{"depth":2,"value":"Talking to the server"},{"depth":3,"value":"Asynchrony"},{"depth":4,"value":"Promises"},{"depth":3,"value":"HTTP"},{"depth":4,"value":"HTTP methods"},{"depth":5,"value":"GET"},{"depth":5,"value":"POST"},{"depth":5,"value":"PUT/PATCH"},{"depth":5,"value":"DELETE"},{"depth":4,"value":"Query params"},{"depth":2,"value":"Extra"},{"depth":3,"value":"Then/catch"},{"depth":3,"value":"Single Page Apps"}]}},"pageContext":{"slug":"/advanced-js/async/","prev":{"label":"Objects in depth","link":"/advanced-js/objects"},"next":{"label":"Introduction","link":"/react-js/introduction"},"repositoryEditUrl":"https://github.com/rocketseat/gatsby-themes/tree/main/examples/gatsby-theme-docs/src/docs/advanced-js/async.mdx","repositoryProvider":"GitHub"}},"staticQueryHashes":["1954253342","2328931024","2501019404","973074209"]}