Vue3 Suspense简单讲解

写一个异步组件

1 子组件 GirlShow.vue

<template>
    <img :src="result.imgUrl"  />
</template>
<script lang="ts">
import axios from 'axios'
import { defineComponent } from 'vue'
export default defineComponent({
    async setup() {  //promise 语法糖  返回之后也是promise对象
        const rawData = await  axios.get('https://apiblog.jspang.com/default/getGirl')
//rawData  就是请求axios返回的正确的结果

//返回出去结果  类似下面
//const result=rawData.data
  //      return {result}
    //}

 return {result:rawData.data}
})
</script>

这样组件就编写完成了，看起来是比纯Promise的写法好看很多了。

2 父组件引入子组件

打开App.vue页面，然后先用import引入子组件。

import GirlShow from "GirlShow.vue";


<template>
  <div>
    <Suspense>
//#default axios数据请求成功后返回数据显示
      <template #default>
         <girl-show />
      </template>
//#default axios数据请求中和请求错误显示
      <template #fallback>
        <h1>Loading...</h1>
      </template>
    </Suspense>
  </div>
</template>

<script>
import {onErrorCaptured} from "vue";
const app = {
  name: "App",
  components: {GirlShow }, //组件子组件
  setup() {
    return {};
  // 异步请求错误监听 引入onErrorCaptured就可以直接在setup()函数中直接使用了
onErrorCaptured((error) => {
      console.log(`error====>`,error)
      return true  
    })

  },
};
</script>