Vue开发中mounted执行服务端请求后isBookmarked不渲染，需等请求完成再渲染的咨询

• 未对接口异步调用添加await：BookmarksService.index为返回Promise的异步方法，没有await的情况下，一方面直接对Promise对象取.data属性根本拿不到真实接口返回值，另一方面Promise产生rejection时不会被当前try/catch块捕获，会抛出未处理的全局错误直接中断后续代码执行，导致isBookmarked的赋值逻辑根本无法走到，Vue自然捕获不到状态更新。这也是你观察到“程序执行流程在调用BookmarksService接口方法时就中断”的直接原因。
• 生命周期选型不符合需求：mounted是组件DOM挂载完成后才执行的钩子，无论钩子内部写多少异步逻辑，都不会阻塞组件的首次渲染，从框架机制上无法实现“等服务端请求完成再渲染”的目标。
• 边界值判断存在bug：代码里bookmark的初始值为对象{}，后续判断bookmark.length === 0时，空对象不存在length属性，判断结果永远为false，会导致状态赋值逻辑出现错误。

第一步：修正现有异步逻辑的可执行性 #

先补齐缺失的await关键字，修正初始值定义，让接口请求的返回值能被正常拿到、状态赋值逻辑能正常执行：

async mounted () {
    if (!this.isUserLoggedIn) {
      return
    }
    console.log('SongMetadata - beforeMount')
    console.log('songId: ', this.$store.state.route.params.songId)
    console.log('userId', this.$store.state.user.id)
    console.log('isBookmarked: ', this.isBookmarked)
    // 初始值设为空数组，和接口返回的列表结构匹配
    let bookmark = []
    try {
      // 增加await等待异步请求完成，拿到真实响应对象
      const res = await BookmarksService.index({
        songId: this.$store.state.route.params.songId,
        userId: this.$store.state.user.id
      })
      bookmark = res.data
      console.log('Returning bookmark: ', bookmark)
    } catch (err) {
      console.log(err)
      // 接口异常时兜底给空数组，避免后续判断报错
      bookmark = []
    }
    this.isBookmarked = bookmark.length > 0
    console.log('isBookmarked: ', this.isBookmarked)
}

第二步：实现“等服务端请求完成再启动渲染”的目标 #

由于mounted钩子无法阻塞组件渲染，需要通过以下两种成熟方案实现需求：

方案1：父组件渲染闸门模式 #

• 在子组件对应的父组件中定义加载状态标记isDataReady，初始值为false
• 将书签查询的接口逻辑从子组件挪到父组件的created钩子中执行，等接口请求完成、拿到书签状态后，将状态通过props传递给子组件，同时把isDataReady置为true
• 给子组件绑定渲染条件v-if="isDataReady"，只有接口流程完全执行完成后，子组件才会被创建、挂载、渲染，从流程上满足等待请求完成的要求

方案2：路由级异步守卫阻塞 #

• 在当前路由对应的组件中配置beforeRouteEnter导航守卫，在守卫逻辑中调用书签查询接口，等接口Promise resolve之后再调用next()方法放行路由跳转
• 该方案会阻塞整个路由的跳转流程，直到接口请求完成后才会创建并渲染目标页面，适合整页面级别的前置数据加载场景

• 不要尝试通过修改mounted钩子为async函数来阻塞组件渲染，这是Vue的框架实现机制决定的：生命周期钩子的异步执行逻辑，不会打断组件的挂载流程，完全起不到阻塞渲染的作用
• 接口请求的异常分支要做兜底处理，避免异常中断时后续状态赋值逻辑无法执行

内容的提问来源于stack exchange，提问作者Mohammed