await调用的异步函数内部修改class属性与await前后修改的区别

两者最本质的区别是isHidden属性的修改时机完全不同，直接决定了异步操作执行过程中该属性的状态表现：

第一种实现的执行逻辑 #

Promise构造函数的代码是同步执行的，所以调用show方法时的执行顺序是：

1. 同步执行this.isHidden = true
2. 进入Promise构造函数，同步执行this.isHidden = false
3. 再执行后续的// do something逻辑，最终resolve Promise

这种写法下，isHidden = true的状态只会存在极短的一瞬间，整个异步操作执行的全过程里，isHidden都是false。如果你的业务需求是「异步操作过程中隐藏元素/显示加载态」，这种写法完全达不到预期效果。

第二种实现的执行逻辑 #

await会暂停当前async函数的执行，等待后面的Promise状态变为resolved之后才会继续执行后续代码，所以执行顺序是：

1. 调用callShow后，先同步执行this.isHidden = true
2. 执行show方法，等待内部异步逻辑全部执行完成、Promise resolve
3. 异步操作完成后，才执行this.isHidden = false

这种写法下，isHidden = true的状态会覆盖整个异步操作的执行周期，完全符合「操作过程中隐藏、操作完成后恢复显示」的常见业务逻辑。

实际场景对比 #

如果isHidden是用来控制加载动画的显隐：

• 第一种写法的加载动画刚触发显示就会立刻消失，用户根本看不到加载状态
• 第二种写法的加载动画会在整个异步请求/操作过程中持续显示，操作完成后才隐藏，是符合预期的实现

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