Tengo 3 funciones para iniciar sesión como usuario en mi aplicación web React.
const handleLogin = (e) => { e.preventDefault(); // Calling FUNCTION B loginUser({ email, password }).then((value) => console.log('in promise then : ' + value)); console.log('in login page: ' + response); }; export async function loginUser(loginPayload) { // Calling FUNCTION C AuthDataService.login(loginPayload) .then((response) => { var modifiedResponse = response; console.log('in AuthDataService: ' + JSON.stringify(modifiedResponse)); return modifiedResponse; }); } class AuthDataService { async login(data) { return await http.post('/login', data).then((response) => { return response; }); } }El problema es que, en la función B, la respuesta se registra correctamente, pero en la función A, la respuesta (valor) no está definida. ¿No debería la función C esperar hasta que finalice la función B? ¿Qué debo cambiar?
No está devolviendo nada de la función loginUser .
NOTA: No es necesario async si está usando .then
Refactorización que puede hacer como a continuación
export function loginUser(loginPayload) { // Calling FUNCTION C return AuthDataService.login(loginPayload).then((response) => { var modifiedResponse = response; return data; // not sure from where it's coming }); }clase: no es necesario si no está haciendo nada con la respuesta.
login(data) { return http.post('/login', data); }Primero: en handleLogin no está asignando nada al valor de respuesta. Segundo: en loginUser e inicio de sesión no está devolviendo ningún valor.
puedes probar esto:
const handleLogin = async (e) => { e.preventDefault(); const response = await loginUser({ email, password }).then((value) => console.log('in promise then : ' + value)); console.log('in login page: ' + response); }; export const loginUser = async (loginPayload) => { return AuthDataService.login(loginPayload).then((response) => JSON.stringify(response)); } class AuthDataService { async login(data) { return await http.post('/login', data) } }