Getting response from nested Async funtion in React

Question

I have 3 function to login a user on my React web application.

Function C: Calling Login function from Login HTML Page

 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);
    };

Function B: Making authorization

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;
      });
}

Function A: Calling Server

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?

@Ivar There is written return data after console.log, isn't is enough? — JiboOne, Jan 20 '22 at 09:15
That returns a value to the `(response) => { ... }` callback arrow function. Not the `loginUser` function. — Ivar, Jan 20 '22 at 09:16
There is no variable `response` declared anywhere in function A? — Bergi, Jan 20 '22 at 09:18
Which library are you using for your api requests with `http`? if i know i can test somethings. — andre de waard, Jan 20 '22 at 09:28

score 1 · Accepted Answer · answered Jan 20 '22 at 09:15

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);
}

score 0 · Answer 2 · answered Jan 20 '22 at 09:24

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)
  }
}

Getting response from nested Async funtion in React

2 Answers2