Async函数未等待异步操作完成问题排查求助

嘿，我一眼就看到问题出在哪了——你的authenticate函数里混用了await和.then()，而且完全没把异步操作的结果返回出来，这就导致confirmCode里的await authenticate(credential)拿不到任何有效数据，只能得到undefined。

问题根源拆解 #

• 返回值丢失：你在authenticate里写的return accessToken，只是user.getIdToken().then()这个回调函数的返回值，根本没传递到外层的authenticate函数里。而且整个authenticate函数没有顶层的return语句，所以它默认会返回一个resolved为undefined的Promise。
• 混用异步语法：既然用了async/await，就没必要再用.then()链式调用了，两种语法混用很容易搞丢返回值，代码可读性也差。

修正后的代码 #

先把authenticate函数改成纯async/await风格，确保返回值正确传递：

const authenticate = async (credential) => {
  try {
    // 用await替代.then()，直接获取登录结果
    const result = await firebase.auth().signInWithCredential(credential);
    const user = result.user;
    // 同样用await获取token
    const accessToken = await user.getIdToken();
    // 这里的return才会让外层await拿到有效token
    return accessToken;
  } catch (error) {
    console.log(error);
    // 抛出错误让上层catch捕获，避免问题被隐藏
    throw error;
  }
}

然后confirmCode函数可以保持原有结构，现在就能正确拿到token了：

export const confirmCode = async (verificationId, code) => {
  try {
    const credential = await firebase.auth.PhoneAuthProvider.credential(verificationId, code);
    const accessToken = await authenticate(credential);
    console.log(accessToken); // 现在会正确打印token啦
    return accessToken;
  } catch (error) {
    console.log(error);
    // 这里可以添加你的错误提示逻辑，比如原来的showMessageErrorByCode
    // this.showMessageErrorByCode(error.code);
  }
}

额外提示 #

• 异步代码里尽量保持语法统一，要么全用async/await，要么全用.then()，混用很容易踩坑。
• 不要在catch块里只打印错误就完事，最好把错误抛出去，让上层函数能处理，不然可能会出现"静默失败"的情况，排查问题更麻烦。

内容的提问来源于stack exchange，提问作者Mr. Robot