VueJS從axios承諾中獲得價值

Question

我有這個代碼

模板：

<a href="#" class="video" @click.prevent="checkVideo(subItem.id)" :id="subItem.id" data-toggle="modal" data-target="#playerModal">{{subItem.name}}<span>{{getDuration(subItem.id)}}</span></a>

VueJS功能：

async getDuration(id) {
    var duration  = '';
    await axios.post('/api/v1/checkvideo', {
    menu: id
    })
    .then(function (response) {
    console.log(response.data[0].datas.duration)
    return response.data[0].datas.duration;
    });

    //console.log(duration);
    //return duration;
},

問題是console.log顯示了預期的值但是在Vue渲染上我得到了這個[object Promise]我想知道如何在promise解析后顯示值。

謝謝你的幫助

Answer 1

您的代碼是返回axios，它是一個promise對象。 如果你想返回最后的持續時間。 您應該等待axios承諾並返回響應。

async getDuration(id) {
  var duration  = '';
  const response = await axios.post('/api/v1/checkvideo', {
    menu: id
  })
  return response.data[0].datas.duration;
}

EDITED

由於async返回一個promise，[object Promise]將始終在屏幕上呈現。 如果你想獲得特定id的持續時間，我認為這是正確的。

data() {
  return {
    id: null, // Maybe you should store the value of `id` here
    duration: null
  }
},
mounted() {
  this.getDuration(this.id)
},
methods: {
  async getDuration(id) {
    var duration  = '';
    const response = await axios.post('/api/v1/checkvideo', {
      menu: id
    })
    this.duration = response.data[0].datas.duration;
  }
}