FETCH() in JavaScript

The fetch() function in JavaScript is used to request to the server across the network , process the request and load information in the webpages. It is a simpler way to consume resources asynchronously. Fetch lets us work with REST API’s.

Below is an illustrated diagram of how a fetch works.

Diagram from (How To Make A Chart Using Fetch & REST API’s)

Before we move onto fetch() a short recap on REST API’s and asynchronous method.

There are few different types of REST API’s [GET, POST, PUT, DELETE] and there are three elements in every REST API [REQUEST, RESPONSE and HEADERS]

Fetch() works with promises which makes it easy to write and handle asynchronous requests.

An asynchronous method returns values like synchronous method but instead of immediately returning the final value it returns a promise to supply the value at some point in the future.

A promise is an object which represents the eventual completion or failure of an asynchronous operation and its resulting value.

A promise is generally one of these states :-

• Pending : initial state neither fulfilled nor rejected
• Fulfilled : operation was completed successfully
• Rejected : Operation failed

The .then() function is one of the approaches to consume API in JavaScript.

The fetch() function accepts a url as a parameter. It can be used to make GET, POST, PATCH ,PUT and DELETE request. By default the fetch() uses the GET request.

GET

First we are passing a url , since no other parameter is passed it is going to be a GET request . The response which is returned is an object with a series of method we can use depending on what we want to do with the information. These methods include:-

• Clone() : creates a clone of the response
• redirect() : A new response but with different url
• arrayBuffer() : returns a promise that resolves with an ArrayBuffer
• blob() : resolves with blob
• text() : resolves with a string
• json() : resolves the promise with JSON

We would use json() here because we want to handle our data as json object. Parsing json is possible in any language and lots of language has JSON support inbuilt.

.then() function which comes after take the response and converts it into json.

We can use the second .then() function to modify our data. We can also add a catch() after the second.then() to catch any errors if there are any errors and would show an error message in the browser console.

we can also chain multiple .then() blocks directly to the end of another and passing the result of each block to the next block as you travel down the chain.This makes promises very powerful.

There are two different approaches to display information to the user , one is the optimistic rendering and the other is the pessimistic rendering.

• Optimistic rendering happens before we are certain of the result, that is it does not wait to get the response from the server it is generally quicker and for when the server call actually fails it notifies the user
• Pessimistic rendering happens when the user is sent the response after the certainty of the result , that is after we have the response from the server and is generally much slower.

Here , I have used a pessimistic approach.

The POST, PATCH and DELETE request are written a bit different from a GET request.

The POST and PATCH methods are written in the same way except in the method: we write PATCH instead of POST. In the POST method we pass the main url or url of the index action but in PATCH we pass an id in the url since we are updating a specific element and passing the url of the specific element .The headers sends the metadata of the actual data. For the PATCH we can pass the specific value we are looking to update in the body:JSON.stringify()

PATCH

The POST method creates a new data entry and sends data to the server.

The JSON.stringify() function converts a JavaScript object or value to a string.

POST

DELETE

The fetch() in DELETE request does not have headers or body since it is deleting the specific element . The fetch () function in DELETE takes the url of the specific element to be deleted.

Fetch and promises are more recent addition to the web platform.They are supported well across the browser with the exception of Internet Explorer.

However fetch() is a good choice for working on a more progressive project if we are not worried about older browsers.