时间戳

首页 > 解决方案 > Vue 方法不接受异步/等待

javascript - Vue 方法不接受异步/等待

问题描述

我正在开发一个 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 开发工具中。

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

标签： javascriptvue.jsvuex

解决方案

这是 Promise 构造函数反模式。如果 Promise 已经存在并且可以被链接，则无需使用new Promise。反模式为错误留下了空间，这里就是这种情况。

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

推荐阅读