How to perform ODATA CRUD actions on a SharePoint List using Fetch() instead of AJAX/Axios

Long story short, I figured it out and wanted to share the code on how I did it for those poor individuals like myself that had 20 tabs open looking for a solution.

Feel free to comment on my choices

GET

// OR YOU CAN USE THE ACTUAL address --> fetch(https://TestSite.sharepoint.us/sites/ExactSite +
fetch(_spPageContextInfo.siteAbsoluteUrl + "/api/web/lists/getbytitle('SharePoint List')/items?$filter=Id eq 1")
.then(res => res.text())
.then(str => new window.DOMParser().parseFromString(str, "application/xml"))
.then(data => {
  let itemContent = data.getElementsByTagName("content");
  for (i=0; i<1; i++) {
    console.log(itemContent[i].childNodes[0]childNodes[1].textContent);
  })

POST You might need to get the RequestDigestValue/X-RequestDigest so I'll include it because I needed it

fetch(_spPageContextInfo.siteAbsoluteUrl + "/_api/contextInfo", {
    method: 'POST',
    headers: {
        'Accept': "application/xml;odata=verbose",
        'Content-Type': "application/xml;odata=verbose"
    }
})
.then(res => res.text())
.then(str => new window.DOMParser().parseFromString(str, "application/xml"))
.then(res => {
    let digValHolder = res.getElementsByTagName("d:FormDigestValue");
    let digVal = digValHolder[0].textContent; //This is the value you will need to input in to the Post/Delete Function
    addToList(digVal) //This is the function that will do the adding
})

const addToList = (FormDigestValue) => {
   let metadata = {
      column-name: "value",
      __metadata: { type: "SP.Data.SharePoint_x0020_ListListItem" }
   }

    let postHeader = new Headers({
        'X-RequestDigest': FormDigestValue,
        'Accept': 'application/json; odata=verbose',
        'credentials' : 'include',
        'Content-Type': 'application/json; odata=verbose'
    });

    let postOptions = {
        method: 'POST',
        headers: postHeader,
        credentials: 'include',
        body: JSON.stringify(metadata)
    }

    return fetch(_spPageContextInfo.siteAbsoluteUrl + "/api/web/lists/getbytitle('SharePoint List')/items ", postHeader)
      .then(res => console.log(res))
      .catch(console.err)
}

DELETE You will need to include the FormDigest again and I will include it so it will be easier than scrolling up and down on the page

fetch(_spPageContextInfo.siteAbsoluteUrl + "/_api/contextInfo", {
    method: 'POST',
    headers: {
        'Accept': "application/xml;odata=verbose",
        'Content-Type': "application/xml;odata=verbose"
    }
})
.then(res => res.text())
.then(str => new window.DOMParser().parseFromString(str, "application/xml"))
.then(res => {
    let digValHolder = res.getElementsByTagName("d:FormDigestValue");
    let digVal = digValHolder[0].textContent; //This is the value you will need to input in to the Post/Delete Function
    deleteFromList(digVal) //This is the function that will do the deleting
})

const deleteFromList = (id, FormDigestValue) => {

    let deleteHeader = new Headers({
        'X-RequestDigest': FormDigestValue,
        'Accept': 'application/json; odata=verbose',
        'credentials' : 'include',
        'Content-Type': 'application/json; odata=verbose',
        'IF-MATCH' : '*'
    })

    let deleteOptions = {
        method: 'DELETE',
        headers: deleteHeader
    }

    return fetch(_spPageContextInfo.siteAbsoluteUrl + "/api/web/lists/getbytitle('SharePoint List')/items" + id , deleteHeader )
      .then(res => console.log(id + " has been deleted"))
      .catch(console.err)
}