Watch the entire #JavaScriptJanuary series from the beginning!

The Fetch API makes it easy to retrieve data from an external source.

The first parameter is the URL that will provide the data. The second parameter is optional and is an object containing options.

Fetch is promise based so we will use “.then” to get our response. The response contains our headers and data. In order to consume the data we will need to convert it into JSON. So we return response.json(). Once that is returned it will move into the next “.then” and now we can do something with the JSON data.

By default, without any options, fetch uses the “Get” method. We also use other methods with fetch. That’s where the options come in.

After our URL we include our options object. The first option will be the method, and we will use “Post”. Next we’ll include the data that we want to send in the body. In order to send it properly we have to wrap it in JSON.stringify. And lastly, we include our headers option with our content type set to application / json.

After that we have our first “.then” that receives the response and processes the JSON. And our second “.then” can then do something with the response data.

In this instance we receive the data that we sent along with an id that the server added.

There are other factors to consider when using fetch such as error handling. Note that if you receive an error status such as a 404 error, fetch will still resolve successfully. So you will need to do some extra error handling.

I’ll be releasing a new video every day in January! Stay tuned..
_____________________________________

📚 Learn to CODE in just a FEW months here:
Treehouse Discount Code: https://treehouse.7eer.net/codeSTACKr
_____________________________________

🛠️ Tools I use:
🟠 Theme: https://marketplace.visualstudio.com/items?itemName=codestackr.codestackr-theme
🟠 Font: STACKr Code (Exclusive to my VS Code Course – https://vsCodeHero.com)
🟠 SuperHero Extension Pack: https://marketplace.visualstudio.com/items?itemName=codeSTACKr.superhero-extensions

🤖 I now use AI-powered code completions thanks to Kite. You should too so grab it FREE: https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=codestackr&utm_content=description-only
_____________________________________

💖 Show support!
PayPal: https://paypal.me/codeSTACKr
_____________________________________

Watch Next:
Web Development – Beginners Roadmap (2020) – https://youtu.be/iogabydg2y0
Playlist: Web Development For Beginners – https://www.youtube.com/watch?v=Ez4yHS2dsN8&list=PLkwxH9e_vrAJ0WbEsFA9W3I1W-g_BTsbt
_____________________________________

Connect With Me:
Website: http://www.codestackr.com
Twitter: https://twitter.com/codeSTACKr
Instagram: https://instagram.com/codeSTACKr/
Facebook: https://facebook.com/codeSTACKr
_____________________________________

** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you.

#JavaScriptJanuary #31Days31Videos #codeSTACKr

source