分享
三行代码  ›  专栏  ›  技术社区  ›  muffel

Vue:如何在组件初始化过程中等待承诺? - Vue: How do I wait for a Promise in the component initialization process?

  •  0
  • muffel  · 技术社区  · 1 周前

    我有几个Vue组件(实现为 .vue webpack和vue加载程序处理需要同步的文件(即显示/允许视频流交互)。其中一些需要一些初始化工作(即下载元数据或图像)。

    我能不能 延迟 一个组件直到初始化准备好?如果我能等待一个承诺在像钩子一样的生命周期中实现,那将是完美的 beforeCreate 是的。

    我知道异步组件,但据我所知,我所能做的就是延迟加载该组件,而且我仍然有办法等待某个初始化。

    1 回复  |  直到 1 周前
        1
  •  2
  •   roli roli    1 周前

    你可以在路线上做。

    const router = new VueRouter({
      routes: [
        {
          path: '/foo',
          component: Foo,
          beforeEnter: (to, from, next) => {
            doSomeRequests()
             .then(() => (next()))
          }
        }
      ]
    })
    

    doSomeRequests 是一个正在执行异步代码的函数。当异步代码完成时 然后你打电话 next() 允许Vue路由器输入与URL对应的组件。在示例中,组件 Foo

    我的建议是在组件中显示加载程序。

    <template>
      <!-- code  -->
        <LoaderComponent :loading="loading" />
      <!-- code  -->
    </template>
    

    剧本部分:

    <script>
     export default {
       // code
       data: () => ({
        loading: false
       }),
    
       created () {
         this.loading = true
         doSomeRequests()
          .then(<!-- code  -->)
          .finally(() => (this.loading = false))
       }
     }
    </script>