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 : ''
    }
)

Answer 3

export default {
  data() {
    return {
      iconUrl: ''
    }
  },
  async created() {
    this.iconUrl = await this.getIcon(id);
  },
  methods: {
    async getIcon(appId) {
      const db = await getInstance().queryByPrimaryKey(appId);
      return db ? db.url : '';
    }
  }
}

Answer 4

没有实际写，给你个思路。

因为是异步，所以不能直接去取异步的结果，而是找一个缓冲区。异步的结果往里存，取的时候也直接往里去取。

比如，可以做一个 map，在异步取到值之后去更新 map[id] = value。
而在使用那里做一个带参数的计算属性

试试看。Vue3 用 reactive 处理容易一些，Vue2 要试试