Come verificare se la risposta di un recupero è un oggetto json in javascript

94

Sto usando fetch polyfill per recuperare un JSON o un testo da un URL, voglio sapere come posso verificare se la risposta è un oggetto JSON o è solo testo

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

javascript json fetch-api

— Sibelius Seraphini
fonte

stackoverflow.com/a/20392392/402037

— Andreas

163

Puoi controllare content-typela risposta, come mostrato in questo esempio 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
    });
  }
});

Se devi essere assolutamente sicuro che il contenuto sia JSON valido (e non fidarti delle intestazioni), puoi sempre accettare la risposta come texte analizzarla tu stesso:

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

Se lo usi async/await, potresti scriverlo in modo più lineare:

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

— zero
fonte

1

Tramite la stessa strategia potresti semplicemente usare response.json in combinazione con catch; se rilevi un errore, significa che non è json. Non sarebbe un modo più idiomatico di gestire questo (invece di abbandonare response.json)?

— Wouter Ronteltap

3

@WouterRonteltap: Non ti è permesso fare solo l'uno o l'altro. Mi sembra di ricordare che hai solo una possibilità alla risposta. Qualsiasi cosa (). In tal caso, JSON è testo, ma il testo non è necessariamente JSON. Pertanto, devi prima fare la cosa sicura, che è .text (). Se fai prima .json () e fallisce, non penso che avrai l'opportunità di fare anche .text (). Se mi sbaglio, mostrami diversamente.

— Lonnie Best

2

Secondo me non puoi fidarti delle intestazioni (anche se dovresti, ma a volte non puoi controllare il server dall'altra parte). Quindi è fantastico che tu menzioni anche try-catch nella tua risposta.

— Jacob il

2

Sì, @Lonnie Best ha completamente ragione in questo. se chiami .json () e genera un'eccezione (perché la risposta non è json), riceverai un'eccezione "Il corpo è già stato consumato" se successivamente chiami .text ()

— Andy

2

Puoi farlo in modo pulito con una funzione di supporto:

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

E poi usalo in questo modo:

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

Questo genererà un errore, quindi puoi catchfarlo se lo desideri.

— larskarbo
fonte

1

Utilizza un parser JSON come 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;
}

— Rakesh Soni
fonte