What is fetch()? A beginner’s take on this JavaScript function

Error 406

Fetch took me a bit to understand. I knew it had to do with how we receive and send data via the internet as JSONs, but how exactly do they work?

Well, before all of that, what even is fetch()? Fetch is how JavaScript handles requests and responses in the world of HTTP. Any sort of data creation or manipulation you do inside an application can be handled by fetch.

The easiest way for me to learn it was to dissect the syntax, which is exactly what I am going to do here.

The methods

GET: This method simply requests information from the API you put in as the argument for fetch().

POST: This method allows you to create and push data to that API so it can store it.

PATCH: This method allows you to change currently existing data within the API.

DELETE: Pretty self-explanatory. Delete data from that API.

method: ‘GET’

fetch('http://website.com/data') // API path
.then((response) => { // Response is the data from that API
response.json(); // Turning that data into a JSON for use
})
.then((jsonData) => { // Manipulating that JSON data
*insert function here*
});

Above is the syntax for the GET method. Normally, you would write what kind of method you want next to the API, but fetch() defaults to the GET method so we don’t need to do that here. In the next line, we call for .then() to wait until we get a response. The ‘response’ we get is a “promise” from that API. A promise is just an object of the data we’ve requested waiting to be fulfilled in it’s task, whether that task fails or not. Once we retrieve that data successfully, we want to turn it into a JSON so we can actually use it. We do another then() to get that JSON data and do whatever we want with it, but it is usually a good idea to console.log the data to see if it’s exactly what we want.

method: ‘POST’

fetch('http://website.com/data') // API path
method: "POST", // What we want to do with the API
headers: { // The data we are going to put and then receive
"Content-Type": "application/json" // What data type we're putting
"Accept": "application/json" // What data type we're getting
},
body: JSON.stringify({ // The actual data we're sending
*attributes go here*
}),
.then((response) => { // Response is the data from that API
response.json(); // Turning that data into a JSON for use
})
.then((jsonData) => { // Manipulating that JSON data
*insert function here*
});

The POST method is used to upload data to the API, such as creating a new user for a website or whatever other object. You’ll notice a few new things. We actually wrote ‘method: “POST”’ this time around to not let fetch() default to a GET method like above. The next line, headers:, simply tells the API the data-type we are sending and are going to accept, which is JSON. The next line, body:, is the actual data we are submitting to the API. The body should follow the same format as the API has its JSON data, so it should be key-value pairs. We throw that into a JSON.stringify to convert that JavaScript data into a JSON that the API can read.

method: ‘PATCH’

fetch('http://website.com/data/${dataid}') // API path to that data
method: "PATCH", // What we want to do with the API
headers: { // The data we are going to put and then receive
"Content-Type": "application/json" // What data type we're putting
"Accept": "application/json" // What data type we're getting
},
body: JSON.stringify({ // The actual data we're editing
*attributes go here*
}),
.then((response) => { // Response is the data from that API
response.json(); // Turning that data into a JSON for use
})
.then((jsonData) => { // Manipulating that JSON data
*insert function here*
});

The PATCH method kind of works the same way as POST, except we’re just changing data that’s already in the API. The first thing that you may have missed is that I interpolated an ID value inside the API path. This is assuming you want to change the data of the object with that specific ID. We must take care to not mass-edit the data in our API, lest we want all our objects to have the same value of an attribute. We also took away “Accept”. If the server we’re requesting from only returns JSON, then we don’t have to specify that we want to accept JSON to that server.

method: ‘DELETE’

fetch('http://website.com/data/${dataid}') // API path to that data
method: "DELETE", // What we want to do with the API
});

Yeah, it’s that simple for this one.

And there you have it. My explanation of fetch() to the best of my ability as someone with not a whole lot under their belt in terms of coding experience. Now get to working on that data!

Software engineer