[英]Return a promise on an external function with async data returned from an inner function
[英]vuejs rendering async function in template displays promise instead of returned data
我正在调用一个加载配置文件图片的异步函数,await 调用按预期将值返回给变量“pf”,但我无法从 loadProfilePic 返回该值。 至少一开始我尝试返回一个静态字符串,在 vue 模板中显示为[object Promise]
。
但是当我删除 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']
},
这是因为async function
返回一个本机承诺,所以loadProfilePic
方法实际上返回一个承诺而不是一个值。 你可以做的是,实际上是在obj
设置一个空的配置文件图片,然后在你的loadProfilePic
方法中填充它。 当obj.profilePic
更新时,VueJS 会自动重新渲染。
<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)); } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div v-for="i in obj"> {{ i.profilePic }} </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.