javascript - 在传递给图像 src 之前检查 promise 是否已解决

Question

我正在尝试异步加载一堆 Logo 。

Vue代码

<template v-slot:item="{ item }">
    <v-list-item-avatar v-if="logo(item.Code, item.Exchange)">
      <v-img :src="logo(item.Code, item.Exchange)"></v-img>
    </v-list-item-avatar>
</template>

JS代码

async logo(code, exchange){
      let hostname = window.location.hostname
      let logoURL = `http://${hostname}/backend/logo/${code}.${exchange}`
      let response = await fetch(logoURL)
      let url = await response.json()
      return url
},

现在我收到错误

[Vue warn]: Invalid prop: type check failed for prop "src". Expected String, Object, got Promise 

如何让它等到 promise 解决后再显示图像？

Answer 1

async函数总是返回 Promise对象，这就是您遇到类型检查错误的原因。使用返回的 url您的async功能。你可以声明一个变量，当async函数响应，将响应值分配给该变量:

let urlLogo = "";

logo(item.Code, item.Exchange).then(url => urlLogo = url);