Comment vérifier si la réponse d'un fetch est un objet json en javascript ?

Question

J'utilise le polyfill fetch pour récupérer un JSON ou du texte à partir d'une URL. Je veux savoir comment vérifier si la réponse est un objet JSON ou s'il s'agit uniquement de texte.

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

Answer 1

Vous pourriez vérifier si le content-type de la réponse, comme indiqué dans cet exemple 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
    });
  }
});

Si vous avez besoin d'être absolument sûr que le contenu est du JSON valide (et que vous ne faites pas confiance aux en-têtes), vous pouvez toujours accepter la réponse en tant que text et l'analyser vous-même :

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

Si vous utilisez async/await vous pourriez l'écrire d'une manière plus linéaire :

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

Answer 2

Vous pouvez le faire proprement avec une fonction d'aide :

const parseJson = async response => {
  const text = await response.text()
  try{
    const json = JSON.parse(text)
    return json
  } catch(err) {
    throw new Error("Did not receive JSON, instead received: " + text)
  }
}

Et ensuite l'utiliser comme ça :

fetch(URL, options)
.then(parseJson)
.then(result => {
    console.log("My json: ", result)
})

Cela entraînera une erreur et vous pourrez catch si vous le souhaitez.

Answer 3

Utilisez un analyseur JSON comme JSON.parse :

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

Answer 4

J'ai récemment publié un npm paquet qui comprend des fonctions utilitaires communes. L'une de ces fonctions que j'ai implémentée ici est juste comme la nis 's async/await réponse que vous pouvez utiliser comme ci-dessous :

import {fetchJsonRes, combineURLs} from "onstage-js-utilities";

fetch(combineURLs(HOST, "users"))
    .then(fetchJsonRes)
    .then(json => {
        // json data
    })
    .catch(err => {
        // when the data is not json
    })

vous pouvez trouver la source sur Github