The Fetch Method is a handy tool that does what it's name implies, it fetches something. Specifically it fetches data from across a network.

To quote the MDN Documentation:

"The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. It also provides a global fetch method that provides an easy and logical way to fetch resources asynchronously across a network"

While the functionality of fetch has in the past been accomplished via other means (namely XMLHTTPRequests and jQuery.Ajax()) fetch provides an easier alternative that can be utilized by other technologies such as service workers while also providing a single location to define concepts such as CORS and extensions to HTTP.

Using Fetch

Fetch at its most basic is a single method call that requires a single argument. That argument being the path to the resource to be fetched. With that path being expressed as a HTTP URL

fetch("http://the-best-api-ever.io/data-base-of-awesome")
  .then(response => response.json())

In the above example we do a couple of things. The first is a call to the fetch method, then we make a call to a different method, the .then method. Why we do this, and what exactly is happening here is outside of the scope of this blog so we wont be going into it except to say that its important when getting data from an API through a fetch request to convert it into more usable format

Call and Response

when you make a Fetch call what you are actually doing is contacting a server and making a request for a piece of data and if all goes well the server sends back the appropriate data in response. Simple right? Well, not quite. You see there is, in fact, a middle step to this process, known as a promise. Interesting right?

Let's take a moment to define a few things, just to really drive home this point.

Request: a call to an API or other server for a specific resource, made by declaring the path to that resource using a URL.

Promise: a kind of pre-response, somewhat like a contract made between the client and the server, indicating what the response will actually be.

Response: the actual data sent back to the client, again this may or may not be the intended data, for instance, if an error is thrown by the server, do to the resource requested not being at the specified location (a 404 error), the error code itself would be the response.

But Wait, Theres More...

You see fetch can do more than simply receive data, in fact it can be used to perform many of the basic HTTP methods, so lets show a few examples

POST Method:

To use fetch to add a new entry to a data base you would write a fetch like so.

const url = "http://the-best-api-ever.io/data-base-of-awesome"
function handlePOST(data){
  // here we use the passed in data we want to form the new data base entry
  const data = { "myData": data }
// here we are creating the and init{} to hold all of the options we need to pass to ensure a successful POST request  
  const init = { 
    method:  'POST',
    headers: { 
              'Content-Type' : 'application/json'
             },
    body:    JSON.stringify(data)
}
fetch(url, init)

PATCH Method:

To update an existing data base entry use a Patch request.

const url = "http://the-best-api-ever.io/data-base-of-awesome"

function handlePATCH(data, id){
// here we use the passed in data we want to update the data //base with to form the body of the request
const body = { "myData" : data }
// here we are creating the and init{} to hold all of the options we need to pass to ensure a successful PATCH request  
const init = { 
    method:  'PATCH',
    headers: { 
              'Content-Type' : 'application/json'
             },
    body:    JSON.stringify(body)
}
// here we are calling the fetch that will process the request, we also concat the id of the entry to the url
fetch(url + `/${id}`, init)

DELETE Method:

To remove a data base entry use a DELETE request

const url = "http://the-best-api-ever.io/data-base-of-awesome"
function handleDELETE(){
  const init = { 
    method:  'DELETE'
}
fetch(url, init)