关于JavaScript async/await提前resolve返回undefined的技术问询

这个问题我太熟悉了——你踩了async/await混用Promise链式调用的常见坑！核心原因是新版本的onLogin函数里没有正确等待axios.get这个异步操作完成，导致函数提前返回了undefined，具体拆解如下：

为什么会提前 resolve？ #

async函数的运行逻辑是：如果函数内部没有显式返回一个Promise或有效值，它会自动把返回值包装成一个resolved状态的Promise。在你的新版本代码里：

• 当result.authorizationCode存在时，你调用了axios.get().then(...)，但既没有用await等待这个axios请求完成，也没有把这个Promise返回出去。
• 代码执行到axios.get()时会立即发起请求，但函数会继续往下走——因为没有等待这个异步操作，onLogin函数没有拿到任何显式返回值，所以它会默认返回一个resolved的Promise，值为undefined。
• 你在.then()里写的return true，只是属于axios.get()返回的Promise的回调返回值，和onLogin函数的返回值完全无关——它只会让axios的Promise变成resolved，但onLogin早就已经完成resolve了。

旧版本为什么正常？ #

旧版本的onLogin里用了await asyncStorageHandler.storeObject(...)，这是一个被await等待的异步操作，函数会等这个存储操作完成后再返回true，所以整个onLogin的Promise会等到所有异步逻辑结束才resolve，自然能返回正确的布尔值。

解决方案（两种可选） #

方案1：统一用async/await风格（推荐） #

把.then()改成await，让代码逻辑更清晰，也避免混用出错：

async onLogin() {
  try {
    const result = await authorize(this.spotifyAuthConfig);
    if (result.authorizationCode) {
      // 等待axios请求完成，拿到结果
      const axiosResult = await axios.get('http://10.0.2.2:8000/authorizespotify/' + result.authorizationCode);
      // 设置令牌过期时间
      axiosResult.data.tokenExpirationDate = Date.now() + (axiosResult.data.expires_in * 1000);
      // 等待存储操作完成（如果storeObject是异步的，一定要加await）
      await asyncStorageHandler.storeObject('tokenObject', axiosResult);
      return true;
    } else {
      return false;
    }
  } catch (error) {
    return false;
  }
}

这样所有异步操作都被await等待，onLogin的Promise会等到所有逻辑完成后才resolve，返回正确的true或false。

方案2：返回Promise链式调用（如果一定要用.then()） #

如果坚持用链式调用，需要把整个axios的Promise链返回出去，让onLogin的Promise等待它执行完毕：

async onLogin() {
  try {
    const result = await authorize(this.spotifyAuthConfig);
    if (result.authorizationCode) {
      // 返回整个Promise链，让onLogin的Promise等待它完成
      return axios.get('http://10.0.2.2:8000/authorizespotify/' + result.authorizationCode)
        .then((axiosResult) => {
          axiosResult.data.tokenExpirationDate = Date.now() + (axiosResult.data.expires_in * 1000);
          // 确保等待存储操作完成，返回它的Promise
          return asyncStorageHandler.storeObject('tokenObject', axiosResult);
        })
        .then(() => {
          // 存储完成后返回true
          return true;
        });
    } else {
      return false;
    }
  } catch (error) {
    return false;
  }
}

总结 #

在async函数里，一定要确保所有异步操作要么被await等待，要么作为Promise返回出去，否则函数会提前resolve导致返回值不符合预期。尽量保持代码风格统一，async/await本身就是为了替代Promise链式调用的回调地狱，混用很容易踩坑哦～

内容的提问来源于stack exchange，提问作者Joachim Bülow