Gotta fetch() em All …

This will be a simple guide on how the fetch Api works in JavaScript. Fair warning you must have some JS knowledge and a modern browser to use the Fetch Api.

The Fetch API is a relatively new JavaScript interface for accessing and manipulating data through the HTTP pipeline. It provides you with the fetch() method that provides an easy way to fetch “asynchronous” HTTP requests for resources across the internet.

fetch requests are promised based, so you don’t have to wait for the object to load from your network request before your app works on the next set of instructions, instead it will fetch the resources when the promise is resolved.

Enough talking , let’s get to coding. I’m a huge nerd so I will be showing an example of how to fetch for some pokemon data. I’m gonna check out one of my favorite pokemon of all time.

Charmander I CHOOSE YOU!! FROM MY CHROME BROWSER CONSOLE.

On the left is a basic fetch request , if you look at our browser console on the right , you can see a whole bunch of info from that fetch request ,

• height
• weight
• id
• array of moves
• etc…

pokedex provided by https://pokeapi.co

So let’s go over the code line by line.

1. fetch( url , arg2 )
   - calls the fetch command on a Api Url to make a request for some data back , there’s a hidden second second arg to that function to specify which type of HTTP request you want (Eg., GET, POST, PATCH, DELETE), if you leave that blank it will default to a GET request. We will explain more on that later.
2. .then(response => response.json())
   - what .then is doing is saying once I get that data back from the HTTP request then we call the .json() function thats built in to the api to return that data back in a JSON format.
3. .then(data => console.log(data)
   - .then takes that JSON data and now you finally have all that good data to play around with, I would usually just console.log it to see what’s in that data.

Maybe I don’t need every single detail on Charmander, let’s customize that fetch request a bit, for now let’s build a function on what specific info I want to render on a pokemon like it’s abilities for instance or if it is a default/starter pokemon.

looks like it’s showing me the correct description

What’s great about fetch is I can always fetch for another pokemon friend at the same time . Now I can check both my pokemon’s abilities at the same time, all these info will come in clutch before a pokemon battle.

pokedex entries by bulbapedia.bulbagarden.net

So now let’s talk about how to make a more complicated fetch request, something like a POST request. We can make POST, PATCH , or DELETE requests only if we have permission , I’m sure the owner of this Pokemon API would not appreciate noobs like me deleting pokemon from their database by accident . So I have fired up a quick JSON server for our demonstration.

Lets go over this fetch POST request step by step again

1. const data = {
   name: “Steven” ,
   favoritePokemon: “Charmander”
   }
   - you first define what you want to POST to your api, in this instance I wanted to pass in my name and my favorite pokemon to my user account.
2. fetch( url ,
   method: “POST”| “PATCH”| “DELETE”,
   -select what type of HTTP request you want to make
3. headers: {
   ‘Content-Type’: ‘application/json’
   }
   - headers allow us to query specific data types, in this instance we are looking for JSON data
4. body: JSON.stringify(data)
   -now we are using the stringify() function from JSON to convert our data object into JSON formatted strings
5. .then(response => response.json())
   - then finally we take that formatted JSON data and POST it to our API
6. .then(data => {
   console.log(‘Success:’, data);
   })
   .catch((error) => {
   console.error(‘Error:’, error);
   });
   -these are to give you a message that you have successfully sent your POST request or catch any errors if it occurs.

Conclusion:

Fetch is one of the most useful and popular tools as a frontend JS developer to render vast amount of information to a web-app. This has just been a small example of what you can do with fetch, we could’ve built a pokemon / digimon collab on the same webpage if we had time. There’s plenty more options on how you can call a fetch request, I only included the two most basic fetch requests .Another great thing about fetch is they have great documentation on it.

Hope you enjoyed my little guide on the fetch API. Stay tuned for more.

Resources:
- More info can be found on the Mozilla Developer Network Readme.
- Amazing Pokemon Api to play around with PokeApi.co.
- Bulbapedia is a great wiki style site for all pokemon needs.