为何axios.get(url).data直接属性访问写法无法正常工作？JS异步问题

问题根源是JavaScript运算符优先级规则，和事件队列、点表示法本身的执行时机没有关系。

JavaScript中成员访问运算符（.）的优先级高于await关键字，所以你写的return await axios.get(url).data.name实际执行逻辑和你预期的完全不同：

1. 先执行axios.get(url)，得到一个Promise类型的实例对象
2. 由于.优先级更高，引擎会直接尝试读取这个Promise实例上的data属性，得到undefined
3. 接着尝试读取undefined上的name属性，直接抛出TypeError: Cannot read properties of undefined (reading 'name')错误，自然进入catch分支

你拆分变量的写法能正常运行，是因为const constellation = await axios.get(url)这行里，await直接作用于axios.get(url)返回的Promise：引擎会暂停函数执行，等请求完成、Promise状态变为fulfilled后，把resolve出的真实响应对象赋值给constellation，之后再通过点表示法访问响应对象上的data.name，此时属性真实存在，逻辑正常运行。

1. 「同一行的属性访问会等await执行完再运行」的认知是错误的。JS表达式执行严格按照运算符优先级走，如果需要在一行里完成请求+属性读取，只要加括号改变优先级即可，和拆分变量的效果完全一致：

// 加括号后，括号内逻辑优先执行，先await拿到响应再读属性
return (await axios.get(url)).data.name;

2. 「Promise对象的属性只能在.then()/.catch()回调中访问」的理解不准确。Promise本身就是普通的JS对象，你可以在任何时机直接访问它上面挂载的自定义属性。我们之所以需要用await或者.then()拿请求结果，是因为异步操作的最终结果存在Promise内部，没有作为公开属性直接暴露在实例上，只有等Promise状态变更后，才能通过await或者回调拿到这个内部存储的结果值，不是说Promise对象本身的属性无法在外部访问。

• 错误写法（无括号直接连写）
  • 先同步执行点访问链路，在Promise实例上找data、name属性，直接抛类型错误
  • await根本没有等到请求返回，代码就已经报错
• 拆分变量写法
  • 先await等待请求返回响应对象，再同步访问响应对象的属性，逻辑正常
• 加括号的一行写法
  • 括号提升await部分的执行优先级，先等请求返回响应对象，再访问属性，逻辑正常

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