Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
In my response, I display a message in a division.
I am wondering of the two codes I am showing which is best, both work.
ONE
.then(function (response) {
if (response.status !== null || response.status !== "") {
response.json().then(function (data) {
showFetch(data);
});
}
})
Or TWO
.then(function (response) {
if (response.status.toString().length > 0) {
response.json().then(function (data) {
showFetch(data);
});
}
})
Or another way you would use?
And the showFetch(data); function just shows whatever needs to be displayed to the user:
function showFetch(data) {
var div = document.getElementById('msg');
document.getElementById("msg").style.display = "block";
for (var key in data) {
div.innerHTML += " " + data[key];
}
}
All is working fine, just wanting to know the best way to check for a response existence.
Thanks...
Edit:
Anyone know what happens if there is no response? I'm still fuzzy on error catching, I have this:
.catch((error) => {
console.log('Error:', error);
document.getElementById('msg').innerHTML = "An error occured";
});
@jlrdw I’d just have different codepaths depending on whether the response was “OK” or not:
fetch('/some-uri').then((response) => {
if (response.ok) {
// Response was successful; parse body
response.json().then((json) => {
// Do something with JSON body...
});
} else {
// Response was not successful; display error or whatever
}
});
@martinbean Originally I had separate sections, but was just trying to call
showFetch(data);
only once. Ok is 200 to 299. I was trying to handle all responses at once if there is a response.
Basically I am just refactoring some existing code. I am going to try something and get back to answer.
@jlrdw not sure what you think is wrong with the above
https://developer.mozilla.org/en-US/docs/Web/API/Response/ok
gives you exacltly what you want. if true show the data, anything else show error
@Snapey in the above:
response.json().then((json) => {
// Do something with JSON body...
});
} else {
// Response was not successful; display error or whatever
}
in // Response was not successful; display error or whatever
The 422 errors are also json, so I would need to repeat
response.json().then((json) => {
To display the validation errors.
Whereas in Axios I can to this:
.then(function (response) {
//console.log(response.data);
var data = response.data;
if (response.status > 199 && response.status < 210) {
showData(data);
}
})
.catch(error => {
if (error.response) {
showData(error.response.data);
}
});
And the function:
function showData(data) {
var div = document.getElementById('msg');
document.getElementById("msg").style.display = "block";
for (var key in data) {
div.innerHTML += " " + data[key];
}
}
In other words:
I might just use Axios, but my only problem is, will version changes be radical.
I.e., Like the original vue verses the latest version.
Basically I like axois js, but how long will backwards compatibility last?
But I will do another refactor and test things.
@martinbean I'll use axios, because in fetch 422 and other codes aren't errors. I would need several if blocks to handle 422, 404, etc. In fetch js I cannot make an error happen with 422, I have tried probably 30 + stackoverflow answers also.
Tomorrow I will try a few more things. Axios is just so much easier.
@jlrdw its the same, just that there is a response method specifically doing what you do in your status check.
@Snapey I decided to use Axios JS, reason is axios actually deals with the 422 in the catch part. Whereas Fetch does not treat 422 as an error, you have to use more code to handle it yourself.
I have no problem doing that, but so much more code.
ironnically even jquery requires less code than fetch, it also handles the 422 validation errors.
I have been comparing all three. 😁
Edit:
However I may still use fetch js for some things.
Please or to participate in this conversation.