How to Check if a Fetch Response is a JSON Object in JavaScript

Introduction

In modern web development, the Fetch API is commonly used to retrieve data from servers, which may return responses as JSON objects or plain text. To handle responses correctly, developers need reliable methods to check the response type. This article details two primary strategies: inspecting response headers and attempting JSON parsing.

Method 1: Checking the Content-Type Header

A straightforward approach is to examine the Content-Type header in the response. If the header includes application/json, the response can be safely parsed as a JSON object. This method relies on the server setting headers correctly and is often considered efficient and standardized.

fetch(myRequest).then(response => {
  const contentType = response.headers.get("content-type");
  if (contentType && contentType.indexOf("application/json") !== -1) {
    return response.json().then(data => {
      // Process JSON data
      console.log(data);
    });
  } else {
    return response.text().then(text => {
      // Process text data
      console.log(text);
    });
  }
});

This method utilizes the headers property of the Fetch API to retrieve and check the Content-Type value. If the server does not provide accurate headers, the response type might be misjudged.

Method 2: Attempting to Parse JSON

If server headers are not fully trusted, the response can first be parsed as text, and then an attempt can be made to parse it using JSON.parse(). If parsing succeeds, the response is a JSON object; otherwise, it is handled as text. This approach is more flexible but may add extra parsing overhead.

fetch(myRequest)
  .then(response => response.text())
  .then(text => {
    try {
      const data = JSON.parse(text);
      // Response is a JSON object
      console.log(data);
    } catch(err) {
      // Response is not a JSON object
      console.log(text);
    }
  });

Using a try-catch block, this method effectively handles JSON parsing errors, ensuring code robustness. However, it assumes that all text responses might be incorrectly parsed as JSON, so it should be used with caution.

Using Async/Await for Cleaner Code

In modern JavaScript, the async/await syntax can simplify asynchronous code readability. Combining with the above methods, a more linear code structure can be written.

async function fetchData(myRequest) {
  try {
    const response = await fetch(myRequest);
    const text = await response.text();
    const data = JSON.parse(text);
    // Process JSON data
    console.log(data);
  } catch(err) {
    // Handle non-JSON data or errors
    console.log(text);
  }
}

This approach centralizes error handling in a single catch block, making the code easier to maintain. It is essentially the same as Method 2 but leverages the syntactic sugar of async/await.

Conclusion

The choice of method depends on the context: if server headers are reliable, checking Content-Type is optimal for efficiency and HTTP standards compliance; if higher fault tolerance is needed, attempting to parse JSON is more suitable. Developers should weigh the trade-offs based on application needs and use async/await to enhance code readability. In practice, it is recommended to prioritize header checking and use parsing attempts as a fallback to ensure compatibility and stability in data processing.