Vue 方法不接受异步/等待
2021-05-11
1088
我正在开发一个 Vue.js 项目，我试图在其中运行一系列相互依赖的承诺。为了简化此示例，我删除了除一个之外的所有承诺，并将其余部分替换为 console.log，它应该输出我尝试访问的值，然后稍后使用。如果我可以让这个例子工作，那么剩下的只是重复它。
createBuilding: function() {
return new Promise((resolve, reject) => {
if(this.building === 'New building') {
this.$store.dispatch('newBuilding', {
address: this.address,
number_units: this.number_units
})
.catch(err => {
reject(err)
})
resolve(this.$store.getters.buildingID)
} else {
resolve(this.building)
}
})
},
onComplete: async function() {
let buildingID = await this.createBuilding()
console.log(buildingID)
alert('Success');
},
实际结果：
我看到 console.log 以未定义的方式触发，然后是警报，然后是等待的承诺/函数显示在 vue dev 工具中。
我怎样才能得到这个，以便我可以得到 createBuilding 方法的结果以用于我的其他方法？
1个回答
这是 Promise 构造函数反模式。如果 Promise 已经存在并且可以链式调用，则无需使用
new Promise
。反模式为错误留下了空间，这里就是这种情况。
newBuilding
应该是异步的，但 Promise 会立即解决，这会导致竞争条件。
应该是：
createBuilding() {
if(this.building === 'New building') {
return this.$store.dispatch('newBuilding',...)
.then(() => this.$store.getters.buildingID)
} else {
return Promise.resolve(this.building)
}
},
使用
async..await
，它简化为：
async createBuilding() {
if(this.building === 'New building') {
await this.$store.dispatch('newBuilding',...);
return this.$store.getters.buildingID
} else {
return this.building
}
},
Estus Flask
2021-05-11