vue3 Suspense 异步请求组件使用

Suspense 异步请求组件使用

前端开发中异步请求是非常常见的事情,比如远程读取图片,调用后端接口等等,在vue2
中判断异步状态是一件必要的事情,但是这些状态都要自己处理,于是在3中提供了suspense函数
suspense中文含义是悬念的意思

Suspense是有两个template插槽的，第一个default代表异步请求完成后，显示的模板内容。fallback代表在加载中时，显示的模板内容。
写一个异步请求加载显示的组件

<template>
  <h1>{{result}}</h1>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  setup() {
    return new Promise((resolve) => {
      setTimeout(() => {
        return resolve({
          result: 42
        })
      }, 3000)
    })
  }
})
</script>

使用时

<Suspense>
  <template #default>
    <async-show />
  </template>
  <template #fallback>
    <h1>Loading !...</h1>
  </template>
</Suspense>

用async...await的写法，它是promise的语法糖。建议你在工作中也尽量的使用async...await的写法。

Suspense也是支持async...await的语法的，所以这个组件就用async的写法来写。

<template>
  <img :src="result && result.imgUrl" />
</template>

<script >
import axios from "axios";

export default {
  async setup() {
    //promise 语法糖  返回之后也是promise对象
    const rawData = await axios.get(
      "https://apiblog.jspang.com/default/getGirl"
    );
    return { result: rawData.data };
  },
};
</script>

Suspense 中可以添加多个异步组件

<Suspense>
  <template #default>
    <async-show />
    <show-dog />
  </template>
  <template #fallback>
    <h1>Loading !...</h1>
  </template>
</Suspense>

处理异步请求错误

在异步请求中必须要作的一件事情，就是要捕获错误，因为我们没办法后端给我们返回的结果，也有可能服务不通，所以一定要进行捕获异常和进行处理。

在vue3.x的版本中，可以使用onErrorCaptured这个钩子函数来捕获异常。在使用这个钩子函数前，需要先进行引入.

import { ref , onErrorCaptured} from "vue";

有了onErrorCaptured就可以直接在setup()函数中直接使用了。钩子函数要求我们返回一个布尔值，代表错误是否向上传递，我们这里返回了true。

const app = {
  name: "App",
  components: { AsyncShow,ShowDog},
  setup() {
    onErrorCaptured((error) => {
      console.log(`error====>`,error)
      return true  
    })
    return {};
  },
};

写好后，我们故意把请求地址写错，然后打开浏览器的终端，看一下控制台已经捕获到错误了。在实际工作中，你可以根据你的真实需求，处理这些错误。