javascript - promise问题？

Question

我有一个vue写的标签

<img :src=getIcon(id)>

 const getIcon = async (appId: number) => {
     const db = await getInstance().queryByPrimaryKey(appId)
     return db ? db.url : ''
 }

其中，queryByPrimaryKey返回的是一个promise，所以这里用await等待promise的值，因为用到了await，所以外层又需要用async包裹，这样整体函数返回的又是一个promise，那么src属性实际上要的是返回的string值，而不是包裹着string的promise，我如何拿到string值？

Answer 1

方法一：

<img :src="imgUrl">

 const getIcon = async (appId: number) => {
     const db = await getInstance().queryByPrimaryKey(appId)
     imgUrl = db ? db.url : ''
 }

方法二:
计算属性

https://cn.vuejs.org/guide/essentials/computed.html

Answer 2

你这样显然不行，你直接 watch id 就行

const imgSrc = ref('')
const id = ref<number | null>(null)
watch(
    () => id.value,
    async newVal => {
        if (!newVal) return
        const db = await getInstance().queryByPrimaryKey(newVal)
        imgSrc.value = db ? db.url : ''
    }
)