Vue 方法不接受 async/await

Question

我正在做一个 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 以 undefined 启动，然后警报然后等待的 promise/function 显示在 vue 开发工具中。

我怎样才能得到这个，以便我可以得到 createBuilding 方法的结果以与我的其他方法一起使用？

Answer 1

这是 promise 构造函数反模式。如果承诺已经存在并且可以链接，则无需使用 new Promise 。反模式将 space 留作错误，这里就是这种情况。

newBuilding 预期是异步的，但承诺会立即解决，这会导致竞争条件。

应该是：

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
    }
},

Vue 方法不接受 async/await

Vue method not accepting async/await

javascript

vue.js

vuex