フェッチの応答がJavaScriptのJSONオブジェクトであるかどうかを確認する方法


94

フェッチポリフィルを使用して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();
});

回答:


161

次のMDNの例にcontent-type示すように、応答のを確認できます。

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
  }
}

1
同じ方法で、response.jsonをcatchと組み合わせて使用​​できます。エラーをキャッチした場合、それはjsonではないことを意味します。これは、(response.jsonを破棄するのではなく)これを処理するより慣用的な方法ではないでしょうか?
Wouter Ronteltap

3
@WouterRonteltap:どちらか一方だけを行うことはできませんか?response.anything()で1ショットしか得られなかったことを覚えているようです。その場合、JSONはテキストですが、テキストは必ずしもJSONである必要はありません。したがって、最初に確実なこと、つまり.text()を実行する必要があります。最初に.json()を実行して失敗した場合、.text()も実行する機会を得られないと思います。私が間違っている場合は、違うものを見せてください。
ロニーベスト

2
私の意見では、ヘッダーを信頼することはできません(信頼する必要がありますが、反対側のサーバーを制御できない場合もあります)。ですから、答えの中でtry-catchについても言及するのは素晴らしいことです。
ジェイコブ

2
はい、@ Lonnie Bestはこれで完全に正しいです。.json()を呼び出し、それが例外をスローする場合(応答がjsonではないため)、その後.text()を呼び出すと、「ボディはすでに消費されています」という例外が発生します
Andy

1

JSON.parseのようなJSONパーサーを使用します。

function IsJsonString(str) {
    try {
        var obj = JSON.parse(str);

         // More strict checking     
         // if (obj && typeof obj === "object") {
         //    return true;
         // }

    } catch (e) {
        return false;
    }
    return true;
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.