Suspense异步请求组件

切图仔

发布于 2022-09-08 18:02:30

9060

文章被收录于专栏：生如夏花绚烂生如夏花绚烂

通过Suspense我们可以方便的实现异步请求，加载前和加载后的效果

通常我们都要一个需求，当组件中的数据还在请求时，展示loading效果，当请求完毕时在展示正常的数据之前这部分逻辑要我们自己定义，现在可以使用Suspense

如下

首先我们要给异步加载数据的组件的setup函数返回一个promise

<template>
  <div class="hello">
    {{number}}
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: String,
  },
  setup(){
    return new Promise(res=>{
      setTimeout(()=>{
        res({
          number:23232
        })
      },1000)
    })
  }
});
</script>

在App.vue中使用 Suspense

<template>
  <div id="app">
    <Suspense>
        <template #default>
           <hello />
        </template>
        <template #fallback>
          <h1>加载中</h1>
        </template>
    </Suspense>
    <img alt="Vue logo" src="./assets/logo.png">
    <h1>X:{{x}}</h1>
    <h2>Y:{{y}}</h2>
    
  </div>
</template>

default为数据加载完毕展示的组件

fallback为数据加载时展示的组件

如果 default中有多个组件，则会等待所有组件数据都加载完毕时才展示default里面的组件。

Suspense抓取错误

在App.vue

setup(){
   const error = ref(null)
     onErrorCaptured((e: any)=>{
         error.value = e
         return true //错误向上传播
     })
   return{
      error
    }
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-01-31 ，如有侵权请联系 cloudcommunity@tencent.com 删除

app