J'ai un problème de compréhension pour que mon code fonctionne correctement. Fondamentalement, je veux valider une donnée du serveur, qui lors de la validation ne génère pas d'erreur mais donne une réponse appropriée lorsque je dois gérer la réponse et lancer une erreur de soumission pour afficher l'erreur de validation avec redux-form.
Voici mon code. .
export function validateEmailFromServer(session,values,callback){
var url='API_URL';
var response = axios.get(url, null,
getHeaders(session));
return (dispatch) => {
response.then(({data}) => {
if(data.resource.length>0){
callback({success: 2,message:'Email id is not available!'});
}else{
callback({success: 1,message:'Email is available!'});
}
}).catch((error) => {
callback({success: 0, message: error});
});
}
}
L'action est définie comme suit
onFormSubmit = (values) =>{
this.setState({loading:true});
this.props.validateEmailFromServer(this.props.session,values,(response)=>{
if(response.success === 2){
throw new SubmissionError({email:'Email already Taken', _error:'Failed'});
}
});
}
Le problème auquel je suis confronté est lorsque je lance le Erreur de soumission lorsque le rappel est appelé sur la fonction onFormSubmit , il appelle automatiquement le bloc d'erreur d'axios, je ne peux pas m'en sortir ..
J'ai besoin aider à résoudre ce problème.
Merci.
4 Réponses :
Enveloppez votre appel de callback dans un try ... catch normal, sinon SubmissionError non géré entraînera naturellement le rejet de l'ensemble du réponse Promise.
export function validateEmailFromServer(session,values,callback){
var url='API_URL';
var response = axios.get(url, null,
getHeaders(session));
return (dispatch) => {
response.then(({data}) => {
try {
if(data.resource.length>0){
callback({success: 2,message:'Email id is not available!'});
}else{
callback({success: 1,message:'Email is available!'});
}
} catch(ex) {
// do something
}
}).catch((error) => {
callback({success: 0, message: error});
});
}
}
Merci de réponse, voulez-vous envelopper l'erreur de soumission en essayant de prendre des blocs?
Toute la logique est un peu compliquée ici, mais j'ai mis à jour ma réponse avec ce que je veux dire. Je recommanderais cependant de repenser le flux logique.
Je ne vois pas la nécessité d ' essayer / attraper ici, c'est un anti-pattern.
Lol ... Je dirais que tout ça est anti-pattern. Mais vous avez besoin d'un try..catch là-bas si vous voulez intercepter SubmissionError avant qu'il ne passe dans le bloc .catch de l'axios réponse.
Ajouter Essayer / Catch ne résout rien, la même chose se passe juste que le bloc de captures interne est appelé ... La logique est simple. Peut-être que je devrais supprimer le rappel et utiliser quelque chose d'autre?
Le bloc de capture interne est destiné à attraper l'erreur et vous donne la possibilité de la gérer d'une manière ou d'une autre, d'envoyer peut-être quelque chose de significatif. Mais oui, vous devriez tout retravailler. Peut-être comprendre d'abord le résultat de la requête axios, puis appeler le rappel. Vous les avez entrelacés pour le moment.
@jayarjo Merci de l'aide, j'ai changé le code retiré Callback, etc. Cela fonctionne pour moi maintenant, vérifiez ma réponse. Merci pour l'aide .. Cheers.
Lorsque vous utilisez des promesses et que vous avez un bloc .catch , il ne déclenchera pas de blocs .catch supplémentaires dans la chaîne à moins que vous ne renvoyiez l'erreur.
Je pense que c'est peut-être le cas ici.
Au lieu de paumer une erreur lorsqu'un email est déjà pris, gérez-le avec quelque chose comme notifyemailtaken (). Vous lancez et error donc, il est devenu attrapé par votre déclaration de capture (c'est ma supposition).
bonne chance!
Oui, c'est vrai, mais l'exigence est d'afficher l'erreur de formulaire redux par défaut, c'est pourquoi j'utilise Erreur de soumission, qui fonctionne bien sans Promise.
Ok, avez-vous essayé de jeter l'erreur dans la promesse? À droite, où vous déterminez l'email n'est pas disponible ... cela fonctionne-t-il?
Avez-vous accès à l'API / au backend? Vous pourriez obtenir "l'email est déjà pris" pour retourner comme une erreur vous permettant de le gérer dans votre déclaration catch ... non?
Attendez ... vous pouvez chaîner une autre .Catch () à la capture existante. Vous gérez l'erreur "e-mail est prise" sur le premier et gérer les autres sur la seconde ... donnez-le à essayer!
L'API ne peut pas lancer d'erreur tant qu'il n'est pas une erreur appropriée, j'ai quand même réussi à résoudre le problème, merci de l'aide, j'ai posté ma réponse ..
Merci à tous pour vos conseils, j'ai réussi à obtenir la solution, j'ai changé l'action et j'ai directement appelé les axios dans la fonction onFormSubmit comme suit, cela fonctionne ..
onFormSubmit = (values) =>{
var getUrl = 'APIURL';
return axios.get(getUrl,getHeaders(this.props.session))
.then(function({data}) {
if(data.resource.length>0)
throw new Error("ValidationError");
else{
console.log("Proceed");
}
}).catch((err) =>{
if(err.message === 'ValidationError')
throw new SubmissionError({email:'Email already Taken', _error:'Failed'});
});
}
J'espère que cela aide les gens qui essaient de trouver une solution similaire.
Merci pour votre aide. Bravo.