vue函数返回显示问题

Question

在vue项目中,有一个数组是遍历显示的,有些是id,有些是值,现在需要把id转为对应的值去显示,

<text style="white-space: nowrap">
                                 {{
                                    columnItem.dictCode
                                        ? getDictItems(columnItem.key, columnItem.dictCode)
                                        : dataSourceItem[columnItem.key]
                                }}
                            </text>

 getDictItems(currentId, dict) {
            console.log('getDictItems1')
            let result = null
            this.$http.get('/dict/getDictItems/' + dict).then((res) => {
                console.log('getDictItems2')
                if (res.data.success) {
                    const foundObject = res.data.result.find((obj) => obj.value == currentId)
                    const label = foundObject?.label
                    const text = foundObject?.text
                    const title = foundObject?.title
                    result = label || text || title
                } else {
                    this.$tip.error(res.data.message)
                }
            })

封装了一个这种函数去返回,但是怎么改都没有返回值.显示为空,因为请求数据没有返回函数就结束了,所以应该怎么改才能够让他等待请求结束后去返回result 值

Answer 1

async 配合await

 async getDictItems(currentId, dict) {
            console.log('getDictItems1')
            let result = null
           await this.$http.get('/dict/getDictItems/' + dict).then((res) => {
                console.log('getDictItems2')
                if (res.data.success) {
                    const foundObject = res.data.result.find((obj) => obj.value == currentId)
                    const label = foundObject?.label
                    const text = foundObject?.text
                    const title = foundObject?.title
                    result = label || text || title
                } else {
                    this.$tip.error(res.data.message)
                }
            })
return result