Response Processing and Handling

Introduction to Fetch Responses

When a fetch request completes, it returns a Promise that resolves to a Response object. This Response object is a powerful interface that provides access to the response status, headers, and body data.

Think of a Response object like a package you've received: you can check the delivery status (HTTP status), examine the label (headers), and unpack the contents (body) in various ways depending on what's inside.

graph TD A[fetch] --> B[Promise] B --> C[Response Object] C --> D[Status Properties] C --> E[Headers] C --> F[Body methods] D --> D1[ok] D --> D2[status] D --> D3[statusText] D --> D4[type] D --> D5[url] D --> D6[redirected] E --> E1[headers object] F --> F1[json()] F --> F2[text()] F --> F3[blob()] F --> F4[formData()] F --> F5[arrayBuffer()]

Basic Response Handling

The most common pattern for handling fetch responses involves checking if the request was successful and then processing the data:

Basic Response Handling Pattern


fetch('https://api.example.com/data')
  .then(response => {
    // First, check if the request was successful
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    
    // Then extract the JSON data from the response
    return response.json();
  })
  .then(data => {
    // Work with the processed data
    console.log('Data received:', data);
  })
  .catch(error => {
    // Handle any errors that occurred during fetch or processing
    console.error('Fetch error:', error);
  });

This same pattern using async/await syntax:

Async/Await Response Handling


async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    
    const data = await response.json();
    console.log('Data received:', data);
    return data;
  } catch (error) {
    console.error('Fetch error:', error);
    throw error; // Re-throw to allow further handling
  }
}

Response Properties

The Response object provides several important properties that give you information about the response:

Response Status Properties


fetch('https://api.example.com/data')
  .then(response => {
    console.log('Response status:', response.status); // e.g., 200, 404, 500
    console.log('Status text:', response.statusText); // e.g., "OK", "Not Found"
    console.log('Success?', response.ok); // true for status in the range 200-299
    console.log('Response URL:', response.url); // The final URL (after redirects)
    console.log('Was redirected?', response.redirected); // true if redirected
    console.log('Response type:', response.type); // e.g., "basic", "cors"
    
    // Continue with response processing
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

Key Response Properties

response.ok: Boolean indicating if the response status is in the successful range (200-299)
response.status: The HTTP status code (e.g., 200, 404, 500)
response.statusText: The HTTP status text (e.g., "OK", "Not Found")
response.url: The final URL of the response (useful when following redirects)
response.redirected: Boolean indicating if the request was redirected
response.type: The type of response ("basic", "cors", "error", "opaque", or "opaqueredirect")

Note: The response.ok property is particularly useful because it lets you quickly check if the response status is in the successful range (200-299). Without this, you'd need to check the status code explicitly with something like response.status >= 200 && response.status < 300.

Response Types and Processing Methods

The Response object inherits from the Body mixin, which provides several methods to process the response body in different formats:

flowchart LR A[Response Body] --> B[response.json()] A --> C[response.text()] A --> D[response.blob()] A --> E[response.formData()] A --> F[response.arrayBuffer()] B --> B1[JavaScript Object] C --> C1[String] D --> D1[Blob] E --> E1[FormData] F --> F1[ArrayBuffer]

Important: Each of these methods returns a Promise and can only be used ONCE per response. The response body is a stream that can only be consumed once. Attempting to call multiple body processing methods on the same response will result in an error.

Different Response Body Processing Methods


// Process as JSON (for API responses returning JSON)
fetch('https://api.example.com/users')
  .then(response => response.json())
  .then(users => console.log(users));

// Process as plain text
fetch('https://api.example.com/logs')
  .then(response => response.text())
  .then(text => console.log(text));

// Process as Blob (for binary data like images)
fetch('https://api.example.com/image.jpg')
  .then(response => response.blob())
  .then(blob => {
    const imageUrl = URL.createObjectURL(blob);
    document.querySelector('#myImage').src = imageUrl;
  });

// Process as FormData (for multipart/form-data responses)
fetch('https://api.example.com/form-data')
  .then(response => response.formData())
  .then(formData => {
    // Access form fields
    console.log(formData.get('field1'));
  });

// Process as ArrayBuffer (for binary data processing)
fetch('https://api.example.com/binary-data')
  .then(response => response.arrayBuffer())
  .then(buffer => {
    // Work with binary data
    const view = new Uint8Array(buffer);
    console.log(view[0]); // First byte
  });

Choosing the Right Processing Method

The processing method you choose depends on the expected content type:

json(): For JSON API responses
text(): For plain text, HTML, XML, etc.
blob(): For binary files like images, PDFs, etc.
formData(): For multipart/form-data responses
arrayBuffer(): For raw binary data that needs processing

Real-world application: A document management system might use different processing methods for different file types:

json() for metadata and document listings
blob() for PDFs and images to display directly
arrayBuffer() for documents that need custom processing
text() for plain text documents and configuration files

Working with Response Headers

HTTP headers contain important metadata about the response. The Fetch API provides the Headers interface to work with these headers.

Accessing Response Headers


fetch('https://api.example.com/data')
  .then(response => {
    // Get all headers
    console.log(response.headers);
    
    // Check if a specific header exists
    console.log('Has Content-Type?', response.headers.has('Content-Type'));
    
    // Get a specific header value
    console.log('Content-Type:', response.headers.get('Content-Type'));
    
    // Get all header key-value pairs
    for (const [key, value] of response.headers.entries()) {
      console.log(`${key}: ${value}`);
    }
    
    // Get all header names
    for (const key of response.headers.keys()) {
      console.log(key);
    }
    
    // Get all header values
    for (const value of response.headers.values()) {
      console.log(value);
    }
    
    return response.json();
  })
  .then(data => console.log(data));

Common Important Headers

Content-Type: The MIME type of the response (helps determine how to process it)
Content-Length: The size of the response in bytes
Cache-Control: Directives for caching mechanisms
ETag: Resource version identifier (useful for conditional requests)
Last-Modified: When the resource was last changed
Set-Cookie: Sets cookies in the browser
Location: Used for redirects
X-RateLimit-*: API rate limiting information

Note: Header names are case-insensitive. The headers are automatically normalized to lowercase when using the get(), has(), and set() methods.

Real-world application: An image gallery application might:

Check the Content-Type header to verify it's an image
Use Content-Length to show download progress
Use Last-Modified and ETag for optimized caching
Check X-RateLimit headers to manage API usage

Error Handling Strategies

Proper error handling is crucial for robust applications. There are different types of errors that can occur with fetch:

Network Errors

Network errors, like connection failures, will cause the fetch Promise to reject. These are caught in the .catch() block or in the catch { } block when using async/await.

HTTP Status Errors

Importantly, HTTP error status codes like 404 or 500 do NOT cause the Promise to reject - the Promise will still resolve with a Response object. You need to check response.ok or response.status to detect these errors.

Comprehensive Error Handling


async function fetchWithErrorHandling(url) {
  try {
    // Network or other fetch errors will be caught in the catch block
    const response = await fetch(url);
    
    // HTTP errors need to be checked manually
    if (!response.ok) {
      // We can create a more informative error based on status
      switch (response.status) {
        case 400:
          throw new Error('Bad request: The server could not understand the request');
        case 401:
          throw new Error('Unauthorized: Authentication is required');
        case 403:
          throw new Error('Forbidden: You do not have permission to access this resource');
        case 404:
          throw new Error('Not found: The requested resource does not exist');
        case 429:
          throw new Error('Too many requests: Rate limit exceeded');
        case 500:
          throw new Error('Server error: Something went wrong on the server');
        default:
          throw new Error(`HTTP error! Status: ${response.status}`);
      }
    }
    
    // Try to parse the response as JSON
    try {
      return await response.json();
    } catch (parseError) {
      // Handle JSON parsing errors
      throw new Error(`Response parsing error: ${parseError.message}`);
    }
  } catch (error) {
    // This catches network errors, manually thrown errors, and parsing errors
    console.error('Fetch failed:', error);
    
    // We can provide different user feedback based on error type
    if (error.message.includes('Failed to fetch')) {
      console.log('Network error - check your connection');
    }
    
    // Re-throw the error for further handling
    throw error;
  }
}

// Usage
fetchWithErrorHandling('https://api.example.com/data')
  .then(data => {
    console.log('Success:', data);
  })
  .catch(error => {
    // Show user-friendly error message
    document.getElementById('error-container').textContent = 
      `Sorry, something went wrong: ${error.message}`;
  });

Response Body Error Information

Many APIs include error details in the response body. You can extract this information for better error handling:

Extracting Error Details from Response


async function fetchWithErrorInfo(url) {
  const response = await fetch(url);
  
  if (!response.ok) {
    // Try to extract error details from the response
    try {
      // Many APIs return error details as JSON
      const errorData = await response.json();
      throw new Error(
        errorData.message || 
        errorData.error || 
        `HTTP error! Status: ${response.status}`
      );
    } catch (jsonError) {
      // If we can't parse the error as JSON, try as text
      try {
        const errorText = await response.text();
        throw new Error(errorText || `HTTP error! Status: ${response.status}`);
      } catch (textError) {
        // If all else fails, throw a generic error
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
    }
  }
  
  return response.json();
}

Handling Different Content Types

Sometimes you may not know in advance what type of content the server will return. You can use the Content-Type header to determine how to process the response:

Content Type Based Processing


async function processResponseByContentType(url) {
  const response = await fetch(url);
  
  if (!response.ok) {
    throw new Error(`HTTP error! Status: ${response.status}`);
  }
  
  // Get the content type from the headers
  const contentType = response.headers.get('Content-Type') || '';
  
  // Process based on content type
  if (contentType.includes('application/json')) {
    return await response.json();
  } else if (contentType.includes('text/html')) {
    const html = await response.text();
    // You might want to parse the HTML, e.g. with DOMParser
    const parser = new DOMParser();
    return parser.parseFromString(html, 'text/html');
  } else if (contentType.includes('text/plain')) {
    return await response.text();
  } else if (contentType.includes('application/xml') || contentType.includes('text/xml')) {
    const text = await response.text();
    const parser = new DOMParser();
    return parser.parseFromString(text, 'application/xml');
  } else if (contentType.includes('image/')) {
    return await response.blob();
  } else if (contentType.includes('multipart/form-data')) {
    return await response.formData();
  } else {
    // For unknown content types, return as blob
    return await response.blob();
  }
}

Advanced Response Techniques

Cloning Responses

Since a response body can only be consumed once, you can use response.clone() if you need to process it multiple ways:

Cloning a Response


fetch('https://api.example.com/data')
  .then(response => {
    // Clone the response before consuming its body
    const responseClone = response.clone();
    
    // Process one copy as JSON for immediate use
    return response.json().then(data => {
      // Store the other copy for later (e.g., in a cache)
      cacheResponse(responseClone);
      
      return data;
    });
  })
  .then(data => console.log(data));

function cacheResponse(response) {
  // Now we can consume the cloned response
  // For example, we might store it in the Cache API:
  if ('caches' in window) {
    caches.open('my-cache').then(cache => {
      cache.put(response.url, response);
    });
  }
}

Reading Streams Manually

For advanced cases, you can access the underlying ReadableStream directly:

Processing a Response Stream


async function downloadWithProgress(url, progressCallback) {
  const response = await fetch(url);
  
  if (!response.ok) {
    throw new Error(`HTTP error! Status: ${response.status}`);
  }
  
  // Get the total size if available
  const contentLength = response.headers.get('Content-Length');
  const total = contentLength ? parseInt(contentLength, 10) : 0;
  
  // Create a reader from the body stream
  const reader = response.body.getReader();
  
  // Create a new readable stream
  const stream = new ReadableStream({
    async start(controller) {
      let receivedLength = 0;
      
      try {
        while (true) {
          const { done, value } = await reader.read();
          
          // If the stream is done, close the controller
          if (done) {
            controller.close();
            break;
          }
          
          // Push the chunk to the new stream
          controller.enqueue(value);
          
          // Update progress
          receivedLength += value.length;
          if (total && progressCallback) {
            progressCallback(receivedLength, total);
          }
        }
      } catch (error) {
        controller.error(error);
      }
    }
  });
  
  // Create a new response from the stream
  return new Response(stream);
}

// Usage example: download a file with progress tracking
async function downloadFile(url) {
  const progressBar = document.getElementById('progress-bar');
  const percentage = document.getElementById('percentage');
  
  try {
    const response = await downloadWithProgress(url, (received, total) => {
      // Update progress UI
      const percent = Math.round((received / total) * 100);
      progressBar.value = percent;
      percentage.textContent = `${percent}%`;
    });
    
    // Convert to blob for download
    const blob = await response.blob();
    
    // Create a download link
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'downloaded-file'; // Suggest filename
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  } catch (error) {
    console.error('Download failed:', error);
  }
}

Response Transformations

You can create custom transformations of Response objects:

Transforming a Response


// Example: Transform a CSV response into a JavaScript array of objects
async function fetchCSV(url) {
  const response = await fetch(url);
  
  if (!response.ok) {
    throw new Error(`HTTP error! Status: ${response.status}`);
  }
  
  const text = await response.text();
  
  // Simple CSV parsing (you might want to use a library for robust parsing)
  const rows = text.split('\n');
  const headers = rows[0].split(',');
  
  return rows.slice(1)
    .filter(row => row.trim()) // Remove empty rows
    .map(row => {
      const values = row.split(',');
      return headers.reduce((object, header, index) => {
        object[header.trim()] = values[index]?.trim();
        return object;
      }, {});
    });
}

// Usage
fetchCSV('https://api.example.com/data.csv')
  .then(data => {
    console.log(data);
    // Now we have an array of objects from the CSV
  });

Practical Examples

Example 1: Image Gallery


// Function to fetch and display an image gallery
async function loadGallery() {
  const galleryContainer = document.getElementById('gallery');
  const loadingIndicator = document.getElementById('loading');
  const errorContainer = document.getElementById('error');
  
  loadingIndicator.style.display = 'block';
  errorContainer.style.display = 'none';
  
  try {
    // Fetch the image metadata
    const response = await fetch('https://api.example.com/gallery');
    
    if (!response.ok) {
      throw new Error(`Failed to load gallery. Status: ${response.status}`);
    }
    
    // Get the image list
    const images = await response.json();
    
    // Process headers for pagination or additional info
    const totalImages = response.headers.get('X-Total-Count');
    const nextPage = response.headers.get('X-Next-Page');
    
    // Update UI with pagination info if available
    if (totalImages) {
      document.getElementById('total-count').textContent = 
        `Showing ${images.length} of ${totalImages} images`;
    }
    
    if (nextPage) {
      document.getElementById('load-more').style.display = 'block';
      document.getElementById('load-more').dataset.page = nextPage;
    }
    
    // Clear previous gallery items
    galleryContainer.innerHTML = '';
    
    // Load and display each image
    for (const image of images) {
      try {
        // Create image container
        const imageItem = document.createElement('div');
        imageItem.className = 'gallery-item';
        
        // Create loading indicator for this image
        const imageLoading = document.createElement('div');
        imageLoading.className = 'image-loading';
        imageLoading.textContent = 'Loading...';
        imageItem.appendChild(imageLoading);
        
        // Add to gallery immediately to show loading state
        galleryContainer.appendChild(imageItem);
        
        // Fetch the actual image
        const imageResponse = await fetch(image.url);
        
        if (!imageResponse.ok) {
          throw new Error(`Failed to load image ${image.id}`);
        }
        
        // Check if the response is actually an image
        const contentType = imageResponse.headers.get('Content-Type');
        if (!contentType || !contentType.includes('image/')) {
          throw new Error(`Response is not an image: ${contentType}`);
        }
        
        // Convert to blob and create object URL
        const blob = await imageResponse.blob();
        const imageUrl = URL.createObjectURL(blob);
        
        // Create and setup image element
        const img = document.createElement('img');
        img.src = imageUrl;
        img.alt = image.description || 'Gallery image';
        img.title = image.title || '';
        
        // Add metadata
        const caption = document.createElement('div');
        caption.className = 'caption';
        caption.textContent = image.title || '';
        
        // Replace loading indicator with image and caption
        imageItem.innerHTML = '';
        imageItem.appendChild(img);
        imageItem.appendChild(caption);
        
        // Add click handler for full-size view
        img.addEventListener('click', () => showFullSize(image, imageUrl));
      } catch (imageError) {
        // Handle individual image errors
        console.error(`Error loading image ${image.id}:`, imageError);
        
        // Show error in place of image
        imageItem.innerHTML = `
          
            ⚠️
            Failed to load image
          
        `;
      }
    }
  } catch (error) {
    // Handle gallery loading error
    console.error('Gallery loading error:', error);
    errorContainer.textContent = error.message;
    errorContainer.style.display = 'block';
  } finally {
    // Hide loading indicator
    loadingIndicator.style.display = 'none';
  }
}

// Function to show full-size image
function showFullSize(image, imageUrl) {
  const modal = document.createElement('div');
  modal.className = 'image-modal';
  
  const modalContent = document.createElement('div');
  modalContent.className = 'modal-content';
  
  const fullImage = document.createElement('img');
  fullImage.src = imageUrl;
  fullImage.alt = image.description || 'Full size image';
  
  const caption = document.createElement('div');
  caption.className = 'modal-caption';
  caption.innerHTML = `
    ${image.title || 'Untitled'}
    ${image.description || ''}
    
      Taken: ${image.dateTaken || 'Unknown'}
      Size: ${image.width} × ${image.height}
    
  `;
  
  const closeButton = document.createElement('button');
  closeButton.className = 'modal-close';
  closeButton.textContent = '×';
  closeButton.addEventListener('click', () => {
    document.body.removeChild(modal);
  });
  
  modalContent.appendChild(closeButton);
  modalContent.appendChild(fullImage);
  modalContent.appendChild(caption);
  modal.appendChild(modalContent);
  
  // Close on background click
  modal.addEventListener('click', (event) => {
    if (event.target === modal) {
      document.body.removeChild(modal);
    }
  });
  
  document.body.appendChild(modal);
}

Example 2: API Client with Response Caching


class CachingApiClient {
  constructor(baseUrl, options = {}) {
    this.baseUrl = baseUrl;
    this.defaultOptions = options;
    
    // Initialize cache
    this.cache = new Map();
    this.cacheLifetime = options.cacheLifetime || 5 * 60 * 1000; // 5 minutes default
  }
  
  async get(endpoint, options = {}) {
    const url = `${this.baseUrl}/${endpoint}`;
    const cacheKey = url;
    
    // Check if we should use cache
    if (options.useCache !== false) {
      const cachedItem = this.cache.get(cacheKey);
      
      if (cachedItem) {
        const { timestamp, response, data } = cachedItem;
        
        // Check if cache is still valid
        if (Date.now() - timestamp < this.cacheLifetime) {
          console.log(`Using cached response for ${url}`);
          return data;
        } else {
          // Cache expired, remove it
          this.cache.delete(cacheKey);
        }
      }
    }
    
    // No valid cache, make a fresh request
    try {
      const fetchOptions = {
        ...this.defaultOptions,
        ...options,
        method: 'GET',
        headers: {
          ...this.defaultOptions.headers,
          ...options.headers
        }
      };
      
      const response = await fetch(url, fetchOptions);
      
      // Process response
      await this.handleResponse(response, cacheKey);
      
      // Return from cache (which now has the fresh data)
      return this.cache.get(cacheKey).data;
    } catch (error) {
      console.error(`Error fetching ${url}:`, error);
      throw error;
    }
  }
  
  async post(endpoint, data, options = {}) {
    const url = `${this.baseUrl}/${endpoint}`;
    
    try {
      const fetchOptions = {
        ...this.defaultOptions,
        ...options,
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          ...this.defaultOptions.headers,
          ...options.headers
        },
        body: JSON.stringify(data)
      };
      
      const response = await fetch(url, fetchOptions);
      
      // Process response without caching for POST
      return await this.processResponse(response);
    } catch (error) {
      console.error(`Error posting to ${url}:`, error);
      throw error;
    }
  }
  
  // other methods like put, delete, etc.
  
  async handleResponse(response, cacheKey = null) {
    if (!response.ok) {
      await this.handleErrorResponse(response);
    }
    
    const data = await this.processResponse(response);
    
    // Cache the successful response if we have a cache key
    if (cacheKey) {
      // Clone the response before storing in cache
      const clonedResponse = response.clone();
      
      this.cache.set(cacheKey, {
        timestamp: Date.now(),
        response: clonedResponse,
        data
      });
    }
    
    return data;
  }
  
  async processResponse(response) {
    // Process based on content type
    const contentType = response.headers.get('Content-Type') || '';
    
    if (contentType.includes('application/json')) {
      return await response.json();
    } else if (contentType.includes('text/')) {
      return await response.text();
    } else {
      // Default to blob for other types
      return await response.blob();
    }
  }
  
  async handleErrorResponse(response) {
    // Try to extract error info from response
    let errorMessage = `HTTP error! Status: ${response.status}`;
    
    try {
      const contentType = response.headers.get('Content-Type') || '';
      
      if (contentType.includes('application/json')) {
        const errorData = await response.json();
        errorMessage = errorData.message || errorData.error || errorMessage;
      } else if (contentType.includes('text/')) {
        errorMessage = await response.text() || errorMessage;
      }
    } catch (e) {
      // Ignore error parsing errors
    }
    
    const error = new Error(errorMessage);
    error.status = response.status;
    error.response = response.clone();
    throw error;
  }
  
  clearCache() {
    this.cache.clear();
  }
  
  invalidateCache(endpoint) {
    const url = `${this.baseUrl}/${endpoint}`;
    this.cache.delete(url);
  }
}

// Usage example
const api = new CachingApiClient('https://api.example.com', {
  headers: {
    'Authorization': 'Bearer token123'
  },
  cacheLifetime: 60000 // 1 minute
});

// First call will fetch from API
api.get('users')
  .then(users => console.log('Users:', users));

// Second call within cache lifetime will use cached data
setTimeout(() => {
  api.get('users')
    .then(users => console.log('Users (from cache):', users));
}, 2000);

// Force refresh by disabling cache
setTimeout(() => {
  api.get('users', { useCache: false })
    .then(users => console.log('Users (forced refresh):', users));
}, 4000);

Response Handling Best Practices

Always check response.ok or response.status: HTTP error status codes don't cause the fetch Promise to reject; you need to check these manually.
Choose the appropriate body processing method: Use json(), text(), blob(), etc. based on the expected content type.
Handle errors comprehensively: Create detailed error objects with information from the response when possible.
Utilize response headers: Headers often contain valuable metadata about the response.
Remember a response body can only be consumed once: Use response.clone() if you need to process a response multiple ways.
Check Content-Type headers: Verify the response is of the expected type before processing.
Implement proper caching strategies: Use response headers like ETag and Last-Modified for conditional requests.
Provide informative error messages: Extract error details from response bodies when available.

Reusable Response Handler


// A reusable utility for handling fetch responses
const responseHandler = {
  // Process a response based on expected type
  async handle(response, expectedType) {
    if (!response.ok) {
      throw await this.createError(response);
    }
    
    return await this.process(response, expectedType);
  },
  
  // Process the response body
  async process(response, expectedType) {
    const contentType = response.headers.get('Content-Type') || '';
    
    // Override with expected type or auto-detect from Content-Type
    const type = expectedType || this.detectType(contentType);
    
    switch (type) {
      case 'json':
        return await response.json();
      case 'text':
        return await response.text();
      case 'blob':
        return await response.blob();
      case 'formData':
        return await response.formData();
      case 'arrayBuffer':
        return await response.arrayBuffer();
      default:
        return await response.json();
    }
  },
  
  // Create a detailed error from a response
  async createError(response) {
    const error = new Error(`HTTP error! Status: ${response.status}`);
    error.status = response.status;
    error.statusText = response.statusText;
    
    try {
      // Try to parse error details from the body
      const contentType = response.headers.get('Content-Type') || '';
      
      if (contentType.includes('application/json')) {
        error.data = await response.json();
        error.message = error.data.message || error.data.error || error.message;
      } else if (contentType.includes('text/')) {
        error.data = await response.text();
        if (error.data && error.data.length < 200) {
          error.message = error.data;
        }
      }
    } catch (e) {
      // Ignore parsing errors
    }
    
    return error;
  },
  
  // Auto-detect response type from Content-Type header
  detectType(contentType) {
    if (contentType.includes('application/json')) {
      return 'json';
    } else if (contentType.includes('text/html') || 
               contentType.includes('text/plain') ||
               contentType.includes('application/xml') ||
               contentType.includes('text/xml')) {
      return 'text';
    } else if (contentType.includes('multipart/form-data')) {
      return 'formData';
    } else if (contentType.includes('image/') || 
               contentType.includes('audio/') ||
               contentType.includes('video/') ||
               contentType.includes('application/pdf')) {
      return 'blob';
    } else {
      return 'json'; // Default to JSON
    }
  }
};

// Usage
fetch('https://api.example.com/data')
  .then(response => responseHandler.handle(response, 'json'))
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Practice Exercises

Exercise 1: Response Type Detector

Build a function that:

Fetches a URL
Examines the Content-Type header
Processes the response with the appropriate method
Returns the processed data

Test it with various URLs returning different content types (JSON API, text file, image, etc.).

Exercise 2: Smart Error Handler

Create an error handling system that:

Detects network errors vs. HTTP status errors
Extracts error messages from response bodies
Creates detailed error objects with status codes and messages
Provides appropriate user feedback based on error type

Exercise 3: Response Cache Manager

Build a response caching system that:

Caches responses based on URL
Respects Cache-Control headers
Implements ETag/If-None-Match conditional requests
Provides methods to clear cache or refresh specific items

Summary

Proper response processing is essential for robust web applications using the Fetch API:

Response object provides access to status, headers, and body
Status properties like ok and status help identify success or errors
Body processing methods (json(), text(), etc.) extract data in appropriate formats
Headers provide metadata about the response
Error handling requires checking both network errors and HTTP status codes
Advanced techniques like cloning and stream processing enable sophisticated applications

By mastering response processing, you can build applications that handle a wide variety of data formats, provide informative feedback to users, and gracefully handle errors and edge cases.