Deep Insights Into JavaScript’s Fetch API | by Sabesan Sathananthan


Synchronous properties of the Response object

After the fetch() request is profitable, you get a Response object. It corresponds to the HTTP response of the server.

const response = await fetch(url);

As talked about earlier, the info contained in Response is learn asynchronously by the Stream interface, nevertheless it additionally comprises some synchronous attributes, which correspond to the header data of the HTTP response (Headers), which could be learn instantly.

Within the above instance, response.standing and response.statusText are the synchronous attributes of Response and could be learn instantly.


The Response.okay property returns a boolean worth, indicating whether or not the request is profitable, true corresponds to the HTTP request standing code 200 to 299, and false corresponds to different standing codes.


The Response.standing property returns a quantity indicating the standing code of the HTTP response (for instance, 200, indicating a profitable request).


The Response.statusText property returns a string representing the standing data of the HTTP response (for instance, after the request is profitable, the server returns “OK”).


The Response.url property returns the requested URL. If the URL has a redirect, this attribute returns the ultimate URL.


The Response.sort property returns the kind of request. The doable values ​​are as follows:

  • primary: Strange, same-origin request.
  • cors: Cross-origin request.
  • error: Community errors, primarily used for service staff.
  • opaque: If the mode attribute of the fetch() request is about to no-cors, this response worth can be returned.
  • opaqueredirect: If the redirect attribute of the fetch() request is about to handbook, this response worth can be returned.


The Response.redirected property returns a Boolean worth, indicating whether or not the request has been redirected.

Decide whether or not the request is profitable

After fetch() sends a request, there is a crucial level to notice: fetch() will report an error solely when there’s a community error or can’t join. In different circumstances, no error can be reported, however the request is taken into account profitable.

This implies, even when the standing code returned by the server is 4xx or 5xx, fetch() won’t report an error (i.e. The Promise won’t change into rejected). Solely by acquiring the true standing code of the HTTP response by the Responese.standing property, can it’s decided whether or not the request is profitable. Please see the next instance:

Within the above instance, the Responese.standing attribute should be equal to 2xx (200~299) to find out that the request is profitable. There’s no want to contemplate the URL bounce (standing code is 3xx) as a result of fetch() will routinely convert the jumped standing code to 200. One other methodology is to find out whether or not Responese.okay is true.

Response.headers property

The Response object additionally has a Responese.headers property, which factors to a Headers object, which corresponds to all of the headers of the HTTP response. Headers objects could be traversed utilizing for...of loops.

The Headers object supplies the next strategies to control headers.

  • Headers.get(): Based on the desired key identify, return the key-value.
  • Headers.has(): Returns a Boolean worth indicating whether or not a header is included.
  • Headers.set(): Set the desired key identify as the brand new key-value, if the important thing identify doesn’t exist, it will likely be added.
  • Headers.append(): Add headers.
  • Headers.delete(): Delete the header.
  • Headers.keys(): Return an iterator that may traverse all of the keys in flip.
  • Headers.values(): Return an iterator that may traverse all key values ​​in flip.
  • Headers.entries(): Return an iterator that may traverse all key-value pairs in flip ([key, value]).
  • Headers.forEach(): Traverse the headers, in flip. Every header will execute a parameter operate.

Among the above strategies can modify the headers as a result of they inherit from the Headers interface. For HTTP responses, modifying headers is of little significance — many headers are read-only and browsers don’t enable modification. Amongst these strategies, probably the most generally used is response.headers.get(), which is used to learn the worth of a sure header.

The Headers.keys() and Headers.values() strategies are used to traverse the header keys and key values ​​respectively.

The Headers.forEach() methodology also can traverse all key values ​​and key names.

Tips on how to learn content material

The Response object supplies completely different studying strategies in response to various kinds of information returned by the server.

  • response.textual content(): Get the textual content string.
  • response.json(): Get the JSON object.
  • response.blob(): Get the binary Blob object.
  • response.formData(): Get the FormData object.
  • response.arrayBuffer(): Get the binary ArrayBuffer object.

The above 5 studying strategies are all asynchronous and all return Promise objects. You will need to wait till the top of the asynchronous operation to get the whole information returned by the server.

response.textual content()

response.textual content() can be utilized to get textual content information, corresponding to HTML information.


response.json() is especially used to get the JSON information returned by the server. The instance has been given earlier.


response.formData() is especially utilized in Service Employee to intercept the shape submitted by the consumer, modify some information, after which submit it to the server.


response.blob() is used to get the binary file.

The above instance reads the flower.jpg picture file and shows it on the internet web page.


response.arrayBuffer() is especially used to acquire streaming media information.

The above instance is an instance the place response.arrayBuffer() will get the audio file tune.ogg after which performs it on-line.


The Stream object can solely be learn as soon as and it’s gone after studying. Because of this solely one of many 5 studying strategies within the earlier part can be utilized, in any other case, an error can be reported.

let textual content =  await response.textual content();
let json = await response.json(); // Report an error

The above instance makes use of response.textual content() first after which reads the Stream. After calling response.json() later, there’s no content material to learn, so an error is reported. The Response object supplies the response.clone() methodology, which creates a replica of the Response object and implements a number of reads.

Within the above instance, response.clone() made a replica of the Response object after which learn the identical picture twice. The Response object additionally has a Response.redirect() methodology, which is used to redirect the Response consequence to the desired URL. This methodology is mostly solely utilized in Service Employee, so I gained’t introduce it right here.

Response.physique attribute

The Response.physique property is the underlying interface uncovered by the Response object. It returns a ReadableStream object for consumer operations. It may be used to learn content material in blocks. One utility is to show the progress of the obtain.

Within the above instance, the response.physique.getReader() methodology returns an iterator. The learn() methodology of this traverser returns an object every time, representing the content material block learn this time. The finished attribute of this object is a boolean worth, used to guage whether or not it has been learn. The worth attribute is an arrayBuffer array, which represents the content material of the content material block. The worth.size attribute is the scale of the present block. content-Switch-Protocol-for-Webpage-%E2percent80percent93-Request-and-Response-Core-JSP-in-Hindi.png