I'm using fetch polyfill to retrieve a JSON or text from a URL, I want to know how can I check if the response is a JSON object or is it only text
fetch(URL, options).then(response => {
// how to check if response has a body of type json?
if (response.isJson()) return response.json();
});
You could check for the content-type of the response, as shown in this MDN example:
fetch(myRequest).then(response => {
const contentType = response.headers.get("content-type");
if (contentType && contentType.indexOf("application/json") !== -1) {
return response.json().then(data => {
// The response was a JSON object
// Process your data as a JavaScript object
});
} else {
return response.text().then(text => {
// The response wasn't a JSON object
// Process your text as a String
});
}
});
If you need to be absolutely sure that the content is a valid JSON (and don't trust the headers), you could always just accept the response as text and parse it yourself:
fetch(myRequest)
.then(response => response.text()) // Parse the response as text
.then(text => {
try {
const data = JSON.parse(text); // Try to parse the response as JSON
// The response was a JSON object
// Do your JSON handling here
} catch(err) {
// The response wasn't a JSON object
// Do your text handling here
}
});
Async/await
If you're using async/await, you could write it in a more linear fashion:
async function myFetch(myRequest) {
try {
const reponse = await fetch(myRequest);
const text = await response.text(); // Parse it as text
const data = JSON.parse(text); // Try to parse it as JSON
// The response was a JSON object
// Do your JSON handling here
} catch(err) {
// The response wasn't a JSON object
// Do your text handling here
}
}
You can do this cleanly with a helper function:
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)
}
}
And then use it like this:
fetch(URL, options)
.then(parseJson)
.then(result => {
console.log("My json: ", result)
})
This will throw an error so you can catch it if you want.
.catch on the fetchHere's an await and async answer based on @nils answer checking the content type first before calling response.json(). No cloning needed.
async function myFetch(myRequest) {
try {
const response = await fetch(myRequest);
const contentType = response.headers.get("content-type");
var data;
if (contentType && contentType.includes("application/json")) {
data = await response.json();
}
else {
data= await response.text();
}
return data;
}
catch(error) {
// other errors occurred
throw error;
}
}
try {
var json = await myFetch("test");
if (json && json.success) {
// do something
}
}
catch(error) {
}
Another example that throws an error if it's not json (not tested):
async function myFetch(myRequest, noJsonFunction) {
try {
const response = await fetch(myRequest);
const contentType = response.headers.get("content-type");
var data;
if (contentType && contentType.includes("application/json")) {
data = await response.json();
return data;
}
throw new Error(response);
}
catch(error) {
throw error;
}
}
// use
try {
var json = await myFetch("test");
}
catch(error|response) {
if (error instanceof Error) {}
if (error instanceof Response) {}
}
indexOf()
contains()? Well, now I'm confused because I don't see contains() on string and I don't see it on array. I've updated it to use includes()Use a JSON parser like 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;
}
Fetch returns a Promise. with Promise chain, a one liner like this would work.
const res = await fetch(url, opts).then(r => r.clone().json().catch(() => r.text()));
catch expects a function type parameter and not the return value of r.text()
I recently published an npm package that includes common utility functions.
one of these functions that I implemented there is just like the nis's async/await answer that you can use as bellow:
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
})
you can find the source on Github
i decided to use this one
return fetch(url).then(async k =>{
const res = await k.text();
if(res.startsWith("[") || res.startsWith("{")){
return JSON.parse(res);
}
console.warn(url + " Did not pass Json Format");
return [];
}).then(g => {
////
})
{/[ is a valid JSON value, not to mention arrays and objects are not the only valid JSON values.jsonContentChecker and check response letter by letter ... then change res.startsWith("{") to CheckObj(res)JSON.parse() call when the string is not in fact a valid JSON value, but just happens to start with {/[ and the console.warn() won't even trigger in that case.
response.isJson().