为何调用React登录async函数仍需await？Promise解析疑问

这是个很常见的疑问，核心原因其实很好理解：所有被async关键字标记的函数，不管内部逻辑如何，它的返回值都会被JavaScript自动包装成一个Promise对象。

咱们结合你的代码一步步拆解：

1. 你的login函数是async函数，哪怕你在里面用了await等待axios请求完成，并且return res.data（一个普通的用户数据对象），这个返回值也会被自动包装成一个resolved状态的Promise，而不是直接返回res.data本身。

2. 所以当你直接调用login({ username, password })时，得到的是一个Promise实例，而不是你想要的用户数据——这就是为什么你说不添加await的话，返回的是未解析的Promise。

3. 而在handleSubmit里加上await，就是告诉JavaScript：“等这个Promise完成（resolve），把它内部的值拿出来再赋值给user”，这样user才会是实际的res.data，而不是Promise对象。

举个简化的小例子帮你加深理解：

async function test() {
  return 'hello';
}

// 直接调用，得到的是Promise
console.log(test()); // 输出: Promise { 'hello' }

// 加await，拿到实际值
async function run() {
  const result = await test();
  console.log(result); // 输出: 'hello'
}
run();

回到你的代码，login函数里的await只是让函数内部等待axios请求完成再执行后续代码，但改变不了async函数本身返回Promise的特性。所以调用的时候必须用await（或者.then()链式调用）来提取Promise内部的实际值。

这样修改后，你的代码就能正常拿到用户数据并存入组件状态啦～

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