从 React 中的嵌套异步函数获取响应

Question

我有 3 个函数可以在我的 React Web 应用程序上登录用户。

函数 C：从登录 HTML 页面调用登录函数

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

功能B：进行授权

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

函数A：调用服务器

class AuthDataService {
  async login(data) {
    return await http.post('/login', data).then((response) => {
        return response;
    });
  }
}

问题是，在函数 B 中，响应被正确记录，但在函数 A 中，响应（值）未定义。功能 C 不应该等到功能 B 完成吗？我应该改变什么？

Answer 1

您没有从 loginUser 函数返回任何内容。

注意： 如果使用 .then

，则不需要异步

重构你可以像下面那样做

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: 如果你没有做任何响应，那么就不需要了。

login(data) {
    return http.post('/login', data);
}

Answer 2

首先：在 handleLogin 中，您没有为响应值分配任何内容。第二：在登录用户和登录中你没有返回任何值。

你可以试试这个：

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

从 React 中的嵌套异步函数获取响应

Getting response from nested Async funtion in React

javascript

asynchronous

promise

async-await

react-native