Fetch API in Javascript

In this article we will learn how to use fetch() to make api call in javascript. Before the arrival of this fetch() api we have been using 'XMLHttpRequest' to make Ajax call in javascript. The 'XMLHttpRequest' method uses callback to retrieve the result and this method is slower than the Fetch api. The Fetch api will return a promise and it is faster than the 'XMLHttpRequest' method.

Fetch API provides us with fetch() method for making api request, that is provided by window object. The fetch() method will return a promise as a result. The promise may resolve to provide result object or it can reject when there is network problem or the requested url is not found which may return 500 or 404 status code.

The response properties contain two properties to determine whether the request has succeeded or not.

  • status - This will return the http status code. If the request has successfully completed then it returns 200-299 code else it returns 404 if not found and 500 if server error.
  • ok - It return true if request is successful else returns false if request has failed.

Example 1

In the above example, we make api call to an url. It returns the promise. Now we convert the response to JSON representation. In order to retrieve the original JSON payload response we need to chain the promise once again.

Example 2

In this example, we have modified the Example 1 code to make it more reliable by handling error. Here we check whether the 'ok' property of response return true or false. If it returns true then it returns the response.json() else it would throw an error which will be handled by the catch block.


The json() of the response object return the promise. This is because response return by the HTTP is in the form of stream to the client chunk by chunk.

To represent the above example using async/await without promise chaining. We rewrite the above example as below.

Example 3

This is really simple. Initially we make api call to an url and obtain a response. Now we need to transform the response to json by calling the json() function in response parameter. If any error occurs its will be catched by the catch block. We put the block of code to a function and prefix the function with async keyword in order to use await.

Fetch api also provide us with the method of providing additional options to add additional information.


let promise = fetch(url, [options]);

In the options we can mention the method, headers and body to give additional information. Below is an example of how to make a POST call and pass some parameters as body of the api.

Example 3

In the above example, we have provided method, headers and body as options parameter to make a POST api call.


The methods available in response body

  • response.json() - Parses the response as JSON object.
  • response.text()- Returns the response as text.
  • response.formData() - Returns the response as object of type FormData.
  • response.blob() - Returns the response as Blob.
  • response.arrayBuffer() - Returns the response as ArrayBuffer.

Options available in fetch

  • method - HTTP methods(GET, POST, PUT, DELETE)
  • headers - Attach any request headers.
  • body - The data to be sent which can be of type string, FormData, Blob or UrlSearchParams, BufferSource object.

Most Read