Fetch: The Response object

The Response Object returned by a fetch() call contains all the information about the request and the response of the network request.

Metadata

headers

Accessing the headers property on the response object gives you the ability to look into the HTTP headers returned by the request:

fetch('./file.json').then(response => {
  console.log(response.headers.get('Content-Type'))
  console.log(response.headers.get('Date'))
})

Request headers for fetch

status

This property is an integer number representing the HTTP response status.

  • 101, 204, 205, or 304 is a null body status
  • 200 to 299, inclusive, is an OK status (success)
  • 301, 302, 303, 307, or 308 is a redirect
fetch('./file.json').then(response => console.log(response.status))

statusText

statusText is a property representing the status message of the response. If the request is successful, the status is OK.

fetch('./file.json').then(response => console.log(response.statusText))

url

url represents the full URL of the property that we fetched.

fetch('./file.json').then(response => console.log(response.url))

Lessons in this unit:

0: Introduction
1: How to use Fetch
2: Catching errors in network requests
3: ▶︎ The Response object
4: Getting the body content
5: The Request object
6: Request headers
7: POST requests
Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. Launching May 21, 2024. Join the waiting list!