vue2在render函数中通过axios异步获取数据渲染侧边栏不成功问题

Question

以下代码是基于若依框架对侧边栏sidebar做的修改，并且项目为vue2项目，在title为待办消息时发送axios请求得到消息数，前端能够发送请求到后端并且得到消息数，但是侧边栏只显示空白菜单不显示“待办消息”和提示消息数，初步猜测是render函数没有等待异步请求完成，就已经完成了渲染

<script>
import pendingMsgApi from "@/api/business/pendingMsg";
export default {
  name: 'MenuItem',
  functional: true,
  props: {
    icon: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    }
  },
  render(h, context) {
    const { icon, title } = context.props
    const vnodes = []
    let pendingMsg = 0;
    if (icon) {
      vnodes.push(<svg-icon icon-class={icon}/>)
    }
    if (title) {
      if (title.length > 5) {
        vnodes.push(<span slot='title' title={(title)}>{(title)}</span>)
      } else {
        if (title !== '待办消息') {
          vnodes.push(<span slot='title'>{(title)}</span>)
        } else {
          //是待办消息，需要判断待办消息条数
          pendingMsgApi.getPendingMsgCount().then(response => {
            console.log("待办信息数：" + response);
            pendingMsg = response;
            if (pendingMsg !== 0) {
              debugger
              vnodes.push(<span slot='title'>{(title)}<el-badge value={pendingMsg} class="item"></el-badge></span>)
            } else {
              vnodes.push(<span slot='title'>{(title)}</span>)
            }
          }).catch(error => {
            console.error(error)
          })
        }
      }
    }
    return vnodes
  }
}
</script>

运行结果如图：

预期效果如图（没有执行axios异步请求，直接写死数据查看预期效果）：

尝试过整个侧边栏等待axios完成请求，但是会导致整个侧边栏都得不到渲染，虽然能拿到各个菜单名，但是没法渲染进去。

尝试封装异步请求 ，能够显示“待办消息”，也能够从后台拿到消息数据，但是无法显示待办消息数

<script>
import pendingMsgApi from "@/api/business/pendingMsg";

export default {
  name: 'MenuItem',
  functional: true,
  props: {
    icon: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    }
  },

  render(h, context) {
    const { icon, title } = context.props
    const vnodes = []
    let pendingMsg = 0;

    if (icon) {
      vnodes.push(<svg-icon icon-class={icon}/>)
    }

    if (title) {
      if (title.length > 5) {
        vnodes.push(<span slot='title' title={(title)}>{(title)}</span>)
      } else {
        if (title !== '待办消息') {
          vnodes.push(<span slot='title'>{(title)}</span>)
        } else {
          //是待办消息，需要判断待办消息条数
          // getMsgCount()
          vnodes.push(
            <span slot="title">{(title)}{pendingMsg ? <el-badge value={pendingMsg} class="item"></el-badge> : null}</span>
          );
        }
      }
    }

    function getMsgCount() {
      pendingMsgApi.getPendingMsgCount().then(response => {
        console.log("待办信息数：" + response);
        pendingMsg = response;
      }).catch(error => {
        console.error(error)
      })
    }

    return vnodes
  }
}
</script>

Answer 1

其他的不说，你这个后台请求肯定是异步执行的，对于代码执行结果来说，肯定是retrun vnodes先执行，pendingMsgApi.getPendingMsgCount().then是后执行的，所以这里的代码不太会影响到渲染，，建议抽出，通过生命周期去实现