vuejs 在模板中渲染异步函数显示承诺而不是返回数据

Question

我正在调用一个加载配置文件图片的异步函数，await 调用按预期将值返回给变量“pf”，但我无法从 loadProfilePic 返回该值。至少一开始我尝试返回一个静态字符串以[object Promise]在 vue 模板中显示。

但是当我删除 await/asnyc 时，它会返回字符串。

<div  v-for="i in obj">
              {{ loadProfilePic(i.id) }}
</div>

   loadProfilePic: async function(id) {
           var pf = await this.blockstack.lookupProfile(id)
           return 'test data';
           //return pf.image[0]['contentUrl']

    },

Answer 1

那是因为async function返回一个本地承诺，所以该loadProfilePic方法实际上返回一个承诺而不是一个值。您可以做的实际上是在 中设置一个空的个人资料图片obj，然后在您的loadProfilePic方法中填充它。VueJS 会在obj.profilePic更新时自动重新渲染。

<div  v-for="i in obj">
    {{ i.profilePic }}
</div>

loadProfilePic: async function(id) {
   var pf = await this.blockstack.lookupProfile(id);

   this.obj.filter(o => o.id).forEach(o => o.profilePic = pf);
}

请参阅下面的概念验证：

<div  v-for="i in obj">
    {{ i.profilePic }}
</div>

loadProfilePic: async function(id) {
   var pf = await this.blockstack.lookupProfile(id);

   this.obj.filter(o => o.id).forEach(o => o.profilePic = pf);
}

new Vue({
  el: '#app',
  data: {
    obj: [{
      id: 1,
      profilePic: null
    },
    {
      id: 2,
      profilePic: null
    },
    {
      id: 3,
      profilePic: null
    }]
  },
  methods: {
    loadProfilePic: async function(id) {
      var pf = await this.dummyFetch(id);
      this.obj.filter(o => o.id === id).forEach(o => o.profilePic = pf.name);
    },
    dummyFetch: async function(id) {
      return await fetch(`https://jsonplaceholder.typicode.com/users/${id}`).then(r => r.json());
    }
  },
  mounted: function() {
    this.obj.forEach(o => this.loadProfilePic(o.id));
  }
});