Angular中async函数返回ZoneAwarePromise而非直接对象的原因探究

这事儿本质是Zone.js的Promise包装机制加上JavaScript异步语法的特性共同导致的，我给你拆明白：

1. 不加await时：拿到的是Zone.js包装后的Promise实例 #

首先，createFloor()应该是一个返回Promise的异步函数对吧？在Angular项目里，Zone.js会自动把所有原生Promise包装成ZoneAwarePromise——这是Zone.js为了追踪异步操作、自动触发Angular变更检测搞的核心操作。

当你直接获取newFloorData却不加await时，你拿到的根本不是最终的那个数据对象，而是这个被Zone.js包装过的Promise实例。Chrome调试器显示的就是这个实例的结构：

• __zone_symbol__state: true：表示这个Promise已经成功resolved（执行完成）
• __zone_symbol__value：就是Promise最终resolve出来的那个实际对象（也就是你想要的{percent: 0, requestSubscription: null, ...}）
• 原型是Object：这是ZoneAwarePromise的继承结构导致的

2. 加了await时：自动提取Promise的resolved值 #

await关键字的核心作用就是帮你“解开”Promise的包装：它会暂停当前函数的执行，直到对应的Promise完成，然后直接把Promise resolved后的结果（也就是__zone_symbol__value里的内容）赋值给变量。

所以当你写const newFloorData = await createFloor()时，newFloorData直接拿到的就是那个包含percent、finish等属性的实际对象，调试器自然显示的是你预期的内容。

一句话总结差异 #

不加await → 拿到的是Zone.js包装的Promise容器；加了await → 拿到的是容器里装的实际数据。Zone.js的包装是Angular为了实现自动变更检测的底层操作，而await是JavaScript异步语法帮你简化了Promise的取值过程。

内容的提问来源于stack exchange，提问作者Kamil Kiełczewski