[解決済み] javascript で fetch の応答が json オブジェクトであるかどうかを確認する方法

質問

fetch polyfillを使ってURLからJSONまたはテキストを取得していますが、レスポンスがJSONオブジェクトであるか、テキストだけであるかを確認する方法を教えてください。

fetch(URL, options).then(response => {
   // how to check if response has a body of type json?
   if (response.isJson()) return response.json();
});

どのように解決するのですか？

を確認することができます。 content-type で示されるように、レスポンスの この MDN の例では :

fetch(myRequest).then(response => {
  const contentType = response.headers.get("content-type");
  if (contentType && contentType.indexOf("application/json") !== -1) {
    return response.json().then(data => {
      // process your JSON data further
    });
  } else {
    return response.text().then(text => {
      // this is text, do something with it
    });
  }
});

コンテンツが有効な JSON であることを絶対に確認する必要がある場合 (そしてヘッダを信用できない場合) は、常にレスポンスを text として受け取り、自分でパースすることができます。

fetch(myRequest)
  .then(response => response.text())
  .then(text => {
    try {
        const data = JSON.parse(text);
        // Do your JSON handling here
    } catch(err) {
       // It is text, do you text handling here
    }
  });

非同期/待機

もし、あなたが async/await を使うなら、もっと直線的に書けるはずです。

async function myFetch(myRequest) {
  try {
    const reponse = await fetch(myRequest); // Fetch the resource
    const text = await response.text(); // Parse it as text
    const data = JSON.parse(text); // Try to parse it as json
    // Do your JSON handling here
  } catch(err) {
    // This probably means your response is text, do you text handling here
  }
}