ReactJS异步调用后端接口等待响应问题（谷歌Workspace登录场景）

问题场景 #

基于ReactJS+Google Workspace+Python后端实现登录功能时，调用后端loginBackend接口后，变量backendToken被赋值为[object Promise]，无法获取后端返回的实际响应值。登录流程中，handleCallbackResponse函数需要等待后端响应后再继续执行，但当前未正确处理异步逻辑。

问题原因 #

1. loginBackend是异步函数（标记了async），直接调用时会返回Promise对象，而非接口返回的实际数据
2. handleCallbackResponse不是异步函数，无法使用await等待异步操作完成

解决方案 #

1. 修改handleCallbackResponse为异步函数并添加await #

将handleCallbackResponse改为async函数，调用loginBackend时加上await，确保等待后端响应后再执行后续逻辑：

// 修改后的handleCallbackResponse
async function handleCallbackResponse(response){
  console.log("Google token: " + response.credential)
  var userObject = jwt_decode(response.credential)
  var userEmail = userObject.email;
  console.log("userEmail=" + userEmail)
  document.getElementById("sign_in_form_google").hidden = true;

  // 等待后端接口返回结果
  const backendToken = await loginBackend(response.credential)
  console.log("Backend token: ", backendToken)
  setToken(backendToken);
}

2. 优化loginBackend函数的异步逻辑 #

使用async/await替代.then()链式调用，让代码更易读，同时增加错误处理：

// 修改后的loginBackend
async function loginBackend(credentials){
  console.log("Login.js :: loginBackend():: Logging in with " + credentials)
  try {
    const response = await fetch('https://localhost:5000/api/login', {
        method: 'POST',
        headers: {
          'Authorization': 'Bearer ' + credentials
        }
      })
    // 解析后端返回的JSON数据
    const backendToken = await response.json()
    console.log("Login.js :: loginBackend() :: Response is", backendToken)
    return backendToken
  } catch (error) {
    console.error("Login.js :: loginBackend() :: 请求失败:", error)
    // 抛出错误让上层处理，比如提示用户登录失败
    throw error
  }
}

修改效果 #

修改后控制台将输出后端返回的实际token值，而非[object Promise]，setToken也能正确将token保存到localStorage中，完成登录流程。

内容的提问来源于stack exchange，提问作者Europa