How to get the content-length of the response from a request with fetch()

ONLINECAST

2 min read

·

06-10-2024

10

0

Share

Mastering Content-Length with Fetch: Getting the Response Size

Understanding the size of the data returned from a web request is crucial for optimizing resource usage, managing user expectations, and building efficient web applications. Fetch, the modern way to make web requests in JavaScript, provides a straightforward method to retrieve the Content-Length header of a response, which represents the size of the data in bytes.

The Problem: Measuring the Response Size

Imagine you're building a web application that fetches large files from a server. You want to provide users with a progress bar, indicating how much of the file has been downloaded. How can you determine the total file size needed for the progress bar calculation?

Code Example: Fetching with Content-Length

fetch('https://example.com/large-file.zip')
  .then(response => {
    // Check for errors (e.g., 404 Not Found)
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    // Get the Content-Length header
    const contentLength = response.headers.get('Content-Length');

    // Log the size (in bytes)
    console.log(`Content-Length: ${contentLength}`); 

    // Continue with other operations, like using contentLength for a progress bar
  })
  .catch(error => {
    console.error('Error fetching the file:', error);
  });

In this code, we use fetch to make a request to the URL https://example.com/large-file.zip. Once the response is received, we access the Content-Length header using response.headers.get('Content-Length'). This value will be a string representing the total size of the response body in bytes.

Insights and Considerations:

• Error Handling: Always include error handling within your fetch calls. Check the response.ok property to ensure the request was successful.
• Server-Side Responsibility: The Content-Length header is set by the server, not the client. If the server doesn't provide this header, the browser will be unable to determine the total response size.
• Chunking and Streaming: For large responses, the server might send data in chunks. The Content-Length header provides the total size, while individual chunks might be smaller.
• Alternatives: If Content-Length is not available, you can consider other approaches like:
  • Estimating size based on the file extension: For known file types, you could estimate the size based on general file sizes.
  • Using Content-Range: For partial content requests, the Content-Range header may indicate the total size and the current chunk's range.

Conclusion: Empowering Your Applications

By understanding how to extract the Content-Length header from a fetch response, you gain control over resource management and provide a smoother user experience. This empowers you to build applications that effectively handle large file downloads, display accurate progress indicators, and optimize data handling.

Further Resources:

• MDN Web Docs - Fetch API: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
• HTTP Header Field - Content-Length: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Length