Soooo Fetch….but like technically!
So!! I made it to Mod 3…Javascript and we were definitely forewarned about how hard Javascript was going to be but I don’t think I really braced myself for what Javascript had in store. I think because I chose to do my free bootcamp in Javascript and I was familiar with the syntaxes like ‘ {} ‘ and ‘function,’ I was comfortable with going into it. I also have my amazing mentor James; a Javascript extraordinaire who’s always on call to explain things to me like I’m 5. Yet even having him to rely on, I failed my code challenge with flying colors!
Literally fetch just was not happening for me, basic fetch wasn’t so bad, it’s pretty straight forward! One of the things about Javascript that threw me for a loop was being able to solve problems in many different ways. I didn’t like that, in fact I still don’t really like it but that could be because I don’t feel super confident in my JS skills as of yet. Fetch on the other hand is pretty much the same all the time.
Ignoring my variables, let’s look at this Fetch GET request for some monsters. I chose to put the monsters url within the fetchMonsters call because there was hundreds of monsters within this API and I needed to limit the amount of listed monsters to 50 per page.
Another Fetch GET request where I declared a variable ‘url’ and made it equal to the URL I needed to pull information from. I generally like this way of doing my Fetch request just because it looks cleaner to me. To break down what’s exactly happening though, under our fetchBooks function we’re yelling out to JS go to this url and grab me some info!
The .then(resp => resp.json()) is a promise that gives us the API info to work with. You can test that your fetch is working and returning the necessary information by throwing in a console.log within your Fetch. I was making the mistake of console logging outside of my Fetch! WRONG. Below is the right way to console.log your GET request, passing in the argument of data.
Now that we got a basic Fetch out of the way, let’s discuss the Fetch Patch Request that I really only ever attempted probably once before my code challenge…hahaha yikes! PATCH request is used to update specific information in our URL. In the screenshot below, the number of tickets needed to be updated when a user clicked the buy button.
For this particular situation I only needed to update the ticket number, when doing a PATCH you would put the attribute that needs to be changed within the body. The JSON.stringify converts a JS object or value to a JSON string. This PATCH also change the number of available tickets in the API. There’s also a PUT Request which very similar to as PATCH but all of the properties of the object are with the body: even if all of those things don’t need to be changed.
There are other Fetch request, there’s POST and DELETE. The Post request sends information to the the server and creates and new JS object in the API. The DELETE works in the same way but deletes the JS object in the API. Although this these sound really simple, it can be confusing for beginners like me. I will move onto my next code challenge with A LOT more practice with all the different types of Fetch request. Wish me luck.
