I am using the fetch api in my handleSubmit function in a React component to post data like this:
handleSubmit(event) {
event.preventDefault();
var error = false;
var { username, password } = this.state
var mailFormat = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
if (!username.match(mailFormat)) {
this.setState({ usernameError: true });
error = true;
} else {
this.setState({ usernameError: false });
}
if (password.length < 8) {
this.setState({ passwordError: true });
error = true;
} else {
this.setState({ passwordError: false })
}
if (error) {
this.setState({ formSuccess: false });
return;
}
return window.fetch('http://localhost:8016/users/registration', {
method: 'POST',
headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
body: JSON.stringify({ username_email: username, password: password })
})
// .then(this.handleErrors)
.then((response)=>{
if (response.ok) {
const { token } = response.clone();
const loginOptions = {
token,
cookieOptions: { expires: 1 },
callback: () => Router.push('/login')
}
setTimeout(() => {
login(loginOptions)
}, 5000)
this.setState({
username: '', password: '', userNameDup: false, formError: false, formSuccess: true
})
return response.json();
} else if (!response.ok) {
if (response.status === 409) {
console.log("response.status ", response.status);
this.setState({
userNameDup: true, formError: true, formSuccess: false
});
return;
}
}
return response;
})
.catch(function (error) {
console.log(error);
});
}
My question regarding using fetch is typically one codes it like this to make a post request.
var url = 'https://example.com/profile';
var data = {username: 'example'};
fetch(url, {
method: 'POST', // or 'PUT'
body: JSON.stringify(data), // data can be `string` or {object}!
headers:{
'Content-Type': 'application/json'
}
}).then(res => res.json())
.then(response => console.log('Success:', JSON.stringify(response)))
.catch(error => console.error('Error:', error));
As you can see in my version I have a conditional handling the error. (I’m pretty sure I’ve seen a version using a try catch block. I guess I’m used to the error/node style of handling errors.)
Anyway, I guess I’m wondering what would be the point of the catch function if the else clause in my conditional is handling the error? Will that still be utilized I mean?
So Can anyone show me what is the most ubiquitous style to handle the situation regarding error handling?
Thank you!