Thursday, December 8, 2022
HomeTechnologyDeep Insights Into JavaScript’s Fetch API | by Sabesan Sathananthan

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

Synchronous properties of the Response object

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

const response = await fetch(url);


The Response.ok property returns a boolean value, indicating whether the request is successful, true corresponds to the HTTP request status code 200 to 299, and false corresponds to other status codes.


The Response.status property returns a number indicating the status code of the HTTP response (for example, 200, indicating a successful request).


The Response.statusText property returns a string representing the status information of the HTTP response (for example, after the request is successful, the server returns “OK”).


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


The Response.type property returns the type of request. The possible values ​​are as follows:

  • cors: Cross-origin request.
  • error: Network errors, mainly used for service workers.
  • opaque: If the mode attribute of the fetch() request is set to no-cors, this response value will be returned.
  • opaqueredirect: If the redirect attribute of the fetch() request is set to manual, this response value will be returned.


The Response.redirected property returns a Boolean value, indicating whether the request has been redirected.

Determine whether the request is successful

After fetch() sends a request, there is an important point to note: fetch() will report an error only when there’s a network error or cannot connect. In other cases, no error will be reported, but the request is considered successful.

Response.headers property

The Response object also has a Responese.headers property, which points to a Headers object, which corresponds to all the headers of the HTTP response. Headers objects can be traversed using for...of loops.

  • Headers.has(): Returns a Boolean value indicating whether a header is included.
  • Headers.set(): Set the specified key name as the new key-value, if the key name does not exist, it will be added.
  • Headers.append(): Add headers.
  • Headers.delete(): Delete the header.
  • Headers.keys(): Return an iterator that can traverse all the keys in turn.
  • Headers.values(): Return an iterator that can traverse all key values ​​in turn.
  • Headers.entries(): Return an iterator that can traverse all key-value pairs in turn ([key, value]).
  • Headers.forEach(): Traverse the headers, in turn. Each header will execute a parameter function.

How to read content

The Response object provides different reading methods according to different types of data returned by the server.

  • 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.


response.text() can be used to get text data, such as HTML files.


response.json() is mainly used to get the JSON data returned by the server. The example has been given earlier.


response.formData() is mainly used in Service Worker to intercept the form submitted by the user, modify some data, and then submit it to the server.


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


response.arrayBuffer() is mainly used to obtain streaming media files.


The Stream object can only be read once and it is gone after reading. This means that only one of the five reading methods in the previous section can be used, otherwise, an error will be reported.

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

Response.body attribute

The Response.body property is the underlying interface exposed by the Response object. It returns a ReadableStream object for user operations. It can be used to read content in blocks. One application is to display the progress of the download.


Please enter your comment!
Please enter your name here

Most Popular

Recent Comments