Fetch() Requests

So, fetch() requests. What are they? A fetch() request is a way to interact with a server. It returns a Promise that resolves to the Response object representing the response to the request.

"How does one do this?" you might ask. Well, for starters, we need an API (Application Programming Interface), a server or a mock server to be able to run the request. To do this, there are many different ways, however for this example we will be using a JSON server.

JSON (JavaScript Object Notation) is a data interchange format. JSON sends data between frontends and backends. A JSON server is a node package that can turn a JSON file on your computer into mock data storage.

To set up the JSON server, install JSON globally by running the command below in your terminal:

$ npm install -g json-server

After installing, create a file that will act as storage data:

$ touch db.json

To start the JSON server, run the following code in the same directory as the db.json file:

$ json-server --watch db.json

And you're good to go! You should now have a JSON server up and running that you can communicate with. Now for the communication part.

There's a few different things you can do with fetch(). The main four are GET, POST, PATCH & DELETE.

• GET: Allows you to pull data.
• POST: Allows you to send data
• PATCH: Allows you to update data
• DELETE: A bit self explanatory, but it allows you to remove data.

A simple GET request could look like this:

fetch('https://example.com/data.json')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

In this example, we're making a GET request to 'https://example.com/data.json'. We're then calling the json() method on the response object to parse the response as JSON. We're using the second then() method to log the data to the console. Finally, we're using the catch() method to log any errors that occur during the fetch request.

A POST request could look like this:

fetch('https://example.com/api/endpoint', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'John Doe', email: '[e-mail]' })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

In this example, we're making a POST request to 'https://example.com/api/endpoint', passing a JSON object as the request body, and setting the 'Content-Type' header to 'application/json'. We're then parsing the response as JSON and logging the data to the console.

A PATCH request:

fetch('https://example.com/api/endpoint/123', {
  method: 'PATCH',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'John Doe' })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

In this example, we're doing pretty much the same thing as POST however, note that the PATCH method is used to update an existing resource, and you need to specify the resource identifier in the URL, in this case, 123.

A DELETE request:

fetch('https://example.com/api/endpoint/123', {
  method: 'DELETE',
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

In this example, we're making a DELETE request to 'https://example.com/api/endpoint/123', which will delete the resource identified by the 123 parameter in the URL. We're not passing any request body, as DELETE requests do not typically have a request body.

As with the other HTTP methods, you can customize the DELETE request by passing additional options to the fetch() function, such as headers, body, and so on.