Breaking Down Fetch

Photo by Jeremy Perkins on Unsplash

When we were first taught how to fetch in Javascript, I was a bit confused. I understood its overall concept, but I had trouble getting the exact logistics of it all straight beyond the GET method. So, I attempted to break it all down here. Note that this is just a breakdown of the methods themselves, not necessarily all of the other functions they interact with.

Fetch Overview

There are 4 main methods: GET, POST, PATCH, and DELETE.


The GET method is described above as it is the default method. It essentially retrieves information from the database in a digestible format.

After that, we can do what we’d like with the object. In the below example, I used a function that would iterate over the array of objects returned.

getData = () => {
.then(response ⇒ response.json())
.then(dataCollection ⇒ renderDataFromDatabase(dataCollection))


For POST (ie, sending data a user submitted into the database), we need to pass a configuration object into the database.

fetch(URL, configObj)

The configuration object includes:

Then, you would handle the fetch request.

let dataToPost = {
key1: value1,
key2: value2
let configObj = {
method: "POST",
headers: {
"Content-Type": "application/json",
"Accept": "application/json"
body: JSON.stringify(dataToPost)
fetch(url, configObj)
.then(response => response.json())
.then(newData => renderSingleItem(newData))

Here, I used another aspirational function that would each individual item to the page in the way I choose to manipulate it. I’d call this on the final line of the fetch request so that a newly created item would appear on the page as soon as I submit it without refresh.


Patch was the method that tripped me up the most when I first learned it, because IDs come into play. Patch would need to be used if you are editing any existing item, whether it’s in a form, or if you’re incrementing a ‘likes’ button via a counter.

My preferred way to do this would be to add a class or a data ID (via dataset) when I create the function to render each individual object and manipulate them. This way, the DOM updates and I can access it later in the event listener.

In comparison to a POST request, the major changes are:

let dataToPatch = { //here, we are replacing the previous total likes after another user clicked on the event listener
likes: newLikesValue
const configObj = {
method: "PATCH",
headers: {
"content-type": "application/json",
"accept": "application/json"
body: JSON.stringify(dataToPatch)
fetch(Url + Id, configObj)
.then(response => response.json())
.then(updatedLikesObj => {likeSpan.innerHTML = `${updatedLikesObj.likes} likes`})
//here, we are assuming that the total likes are in a span we grabbed off the DOM, and we replace it with the new likes object we passed back to the database


Delete is one of the more straightforward requests, as long as you’ve properly identified the ID.

In contrast to Patch (which also requires an ID), the only differences are:

const configObj = {
method: 'DELETE',
headers: {
"content-type": "application/json",
"accept": "application/json"
fetch(deleteUrl + idToDelete, configObj)
.then(response => response.json())

I hope this breaks down the methods of a fetch request a little bit more!




Full stack developer based in Brooklyn, NY

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store