Tenemos esta función en nuestro código que se usa para iniciar sesión en un usuario
const userLogin = loginData => { return new Promise(async (resolve, reject) => { try { const res = await auth.post("/login", loginData); resolve(res); } catch (error) { reject(error); } }); }; // Calling function const loginSubmit = async values => { try { const res = await userLogin(values); console.info(res); } catch (error) { console.error("Catch: ", error); } }; Pero a partir de esta respuesta de stackoverflow , los bloques try-catch son redundantes en Promises. Quería probar y limpiar este código, así que cambié el código anterior a:
const userLogin = loginData => { return new Promise(async (resolve, reject) => { const res = await auth.post("/login", loginData); if (res.status !== 201) { reject(new Error("Error")); } resolve(res); }); }; Sin embargo, cuando intenté iniciar sesión con credenciales incorrectas, la consola registra un Uncaught (in promise) Error: Request failed with status code 400
No estoy muy familiarizado con la creación de mis propias promesas, así que no sé cómo hacerlo correctamente.
Un par de problemas en tu código:
Estás creando una promesa innecesariamente; auth.post(..) ya devuelve una promesa, por lo que no necesita crear una promesa usted mismo y envolver auth.post(...) dentro de un constructor de promesa.
Otro problema en su código es que la función ejecutora (función pasada al constructor de la promesa) está marcada como async ; no debería ser una función asíncrona .
Su función podría reescribirse como:
const userLogin = async (loginData) => { const res = await auth.post("/login", loginData); if (res.status !== 201) { throw new Error("Error")); } return res; };También podría volver a escribir su función como:
const userLogin = async (loginData) => { return auth.post("/login", loginData); }; No olvides usar el catch en el código que llama a esta función.
Es posible que desee leer el siguiente artículo para comprender si necesita el bloque try-catch :await vs return vs return await
Creo que en su caso, dado que llama a la función asíncrona dentro del constructor de la promesa, necesita usar try catch.
La respuesta a la que se refirió es correcta siempre que el error haya ocurrido mientras está en el constructor (es decir, el objeto Promise está en proceso); sin embargo, en su caso, el rechazo de la función de auth ocurre mucho después de que se construyó Promise y, por lo tanto, es no rechazarlo.
Por cierto, no tienes que await en la promesa. Puede hacer lo siguiente:
const userLogin = loginData => { return new Promise(async (resolve, reject) => { const prom = auth.post("/login", loginData) .then((res) => { if (res.status !== 201) { reject(new Error("Error")); } resolve(res); }); resolve(prom); }); }; Dado que resolve la llamada de auth asíncrona, cualquier rechazo de la llamada de auth se reflejará como un rechazo de su función