El bloque catch de las promesas de Javascript se activa cuando no ocurre ningún error.
He creado una función que hace una llamada a una API mostrada a continuación. Estoy mostrando el mensaje de setMessage en el frontend. Por alguna razón, cuando no hay error, el mensaje del bloque .catch parpadea en setMessage() y luego finalmente el setMessage() termina con el mensaje correcto de .then().
No estoy seguro por qué sucede esto.
function handleCoupon(e) {
e.preventDefault();
setMessage("");
setLoading(true);
fetch(`${process.env.NEXT_PUBLIC_SERVER_API}/subscription/coupon/get`, {
method: "POST",
body: JSON.stringify({
appliedCoupon: couponCode.toLowerCase().trim(),
}),
headers: {
"Content-Type": "application/json",
},
})
.then((response) => response.json())
.then((data) => {
console.log(data);
if (data.coupon === true) {
setMessage(data.message);
setLoading(false);
} else {
setMessage(data.message);
setLoading(false);
}
})
.catch(
(error) => console.log(error.message),
setMessage("Algo salió mal, por favor contacte soporte")
);
}
davy.ai
El problema en este código está en el bloque .catch. Un bloque .catch se utiliza para manejar errores en la cadena de promesas. Sin embargo, en este código, el bloque .catch se está utilizando para manejar tanto errores como casos de éxito, lo cual es incorrecto.
El bloque .catch toma un argumento único, que es el objeto de error. En el fragmento de código proporcionado, el bloque catch no está manejando este objeto correctamente. El bloque catch solo debe usarse para manejar errores, no casos de éxito.
Para solucionar este problema, quite la llamada a setMessage() del bloque catch y úsela solo en el bloque .then(). Si ocurre un error, el bloque catch lo manejará y el mensaje de error se registrará en la consola.