The fetch()

In my journey of learning one of the most widely used languages in coding, arguably the most difficult aspect to wrap my head around (so far ) is the fetch() method.

fetch() appears to be an integral part of coding and a concept that should be mastered if to succeed in the industry. fetch() provides a way to perform network requests and while its complexity is pretty obvious to those just starting out in their coding career(like me), taking time to learn about it one step at a time is something that cannot be stressed enough.

All fetch() requests are by default HTTPS GET requests unless otherwise stated. There are though, multiple different kinds of fetch() requests we can perform. I will not be going over those in detail but I will gloss over the ones I have learned so far in my coding career:

• GET: The all-around fetch() that requests data from the server for use on my end. Just a request for information.

• PATCH: This one is analogous to the idea of 'updating' something. It requests the information you are looking for and attempts to alter it, patching it up or updating it.

• POST: Also pretty self-explanatory this is quite literally posting something to the server, giving it new information. When you add information anywhere online it goes somewhere, which means you are posting to whatever server you are communicating with.

• DELETE: When you don't want some form of information available online anymore you send a delete request to remove it from the server. Pretty simple here.

There are other HTTPS requests such as CONNECT, HEAD, OPTIONS, PUT and TRACE. I have not learned these requests yet, at least in-depth enough to talk about them, but I would reckon they also have their own very important uses. I hope to grow more familiar with them as time goes on though!

To continue we will be focusing on the default GET request, which we don't have to declare specifically.

The Promise

Initially, when you call fetch it should look something like this.

fetch('someUrlStringHere')

fetch("someStringFormatOfUrlHere") is simply requesting information, typically from a server of some kind. While waiting for a response the fetch() gives us a promise.

A promise is an object that represents the eventual completion, or potential failure, of a fetch request and its value. There are three states a promise could potentially be in:

1. Pending: The initial state of any fetch. The promise is still pending, and the operation has not returned a response yet. Simply a promise that the server has not made good on.

2. Fulfilled: The operation is completed successfully, and the promise is fulfilled with a response value.

3. Rejected: The operation encountered an error, and the promise is rejected with an error reason for why there was not a proper response from the target.

A promise can be pretty confusing to begin with as it appears to be an abstract concept, like a promise in the real world.

After the promise is fulfilled with a response there are multiple ways you can handle the response. Oftentimes, especially at the beginning of your coding journey, you will need to turn it into something that we can recognize easier.

The Response

fetch('someUrlStringHere')
.then(response => response.json())

Using a .then() we can put the response into a callback function. The first callback function at this point will most likely be .json(), turning this confusing response into the familiar object, with keys, values and everything else we are comfortable with.

Now that we have an object that we can work with available to us, we can do whatever we want with it, as with any object. Generally, this is done, and again especially at these beginning journey points, with another .then().

The Object

fetch('someUrlStringHere')
.then(response => response.json())
.then(data => doStuff(data))

Much like the first .then(), there will be a callback function inside of it, but this one will do the actual task we were trying to complete in the first place.

If you console.log() whatever the data is here then you will see an object since the fulfilled request went through the .json(). The data inside this .then() is the familiar friendly object that we have grown to love.

The Catch

The final part of fetch() to cover, as far as it pertains to basic operations is the .catch() operation. catch() is designed to handle errors that occur anywhere in the promise chain. When a promise is rejected at any point, due to an error being thrown or a rejection for whatever reason, the flow then moves directly to the next .catch() available.

This prevents errors from doing many things, such as potentially preventing a site from crashing due to an unexpected error (which would be a better option than just crashing).

Now that the quick and easy of the fetch() operation has been covered we can quickly go over why we should learn it. (Very quick but very important)

Well, the "why" would be because this is how we communicate with servers and as a (beginner) software developer I can only assume that I will be working with fetch() and servers constantly. Therefore, I should probably get pretty comfortable with it.

I hope this explanation and breakdown of fetch() helped someone out. Thinking through this definitely helped me!