为什么用v-html获取到的数据展现到前端变成“{}”

Question

问题遇到的现象和发生背景

为什么用v-html获取到的数据展现到前端变成“{}”这样，但是控制台是有显示数据的

用代码块功能插入代码

classifyId: function  (article_classify_id) {
                    let id = article_classify_id;
                    let classify = async  function(id){
                        let classify_arr_name =
                            axios.get("selectClUpIdName?id=" + article_classify_id).then(function (response) {
                                return response.data;
                            })
                        console.log(classify_arr_name);
                        let name = await classify_arr_name;
                        return name;
                    }
                    console.log(classify(id))
                    return classify(id);
                }

运行结果及报错内容

Answer 1

方式方法就错了
首先，你用v-html去渲染，他渲染的是什么，是v-html的值，也就是你写的classifyId函数的值，classifyId是一个异步函数，他的值是什么，它永远是一个promise啊，可是你要把它变成同步函数，他就获取不到你想要的值了
一般异步获取值都是在页面渲染前先用一个变量预占位进行渲染，异步获取对应的值然后更新到这个变量上，页面上会自己进行更新的，比如下面这样

data.forEach(item => {
  item.classifyHtml = '' // 预占位变量
  this.classifyId(item.article_classify_id).then(name => this.$set(item, 'classifyHtml', name))
})

页面就是用classifyHtml 渲染就行：v-html="a.classifyHtml"

最后，这种循环调用接口的做法也是不可取的，浏览器所能同时发起的服务请求是有数量限制的，如果data数据量很大会造成网络堵塞的，而且也是性能的一种浪费，这种需求肯定需要在服务端去获取，然后一把返回给前台