I have 3 function to login a user on my React web application.
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;
});
}
}
Problem is that, in Function B response is logged correctly but in Function A response(value) is undefined. Shouldn't function C wait until Function B is finished? What should I change?
You are not returning anything from loginUser function.
NOTE: No need for async if are using .then
Refactoring you can do like below
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
});
}
class: no need to then if you are not doing anything with response.
login(data) {
return http.post('/login', data);
}
First: in handleLogin you're not assinging anything to the response value.
Second: in loginUser and login you're not returning any value.
you can try this:
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)
}
}