<template>
  <h4>{{weatherData.city}}</h4>
  <div v-for="(weather, index) in weatherData.data"
    :key="index">
    日期：{{ weather.date }}
    天气：{{ weather.wea_day }}
  </div>
</template>
<script>
import { ref } from "vue";
export default {
  name: "WeatherForecast",
  async setup() {
    const weatherData = ref(null);
    const headers = { "Content-Type": "application/json" };
    // 在 `setup` 内部使用 `await` 需要非常小心
    // 因为大多数组合式 API 函数只会在
    // 第一个 `await` 之前工作
    const fetchweatherData = await fetch("http://www.tianqiapi.com/api?version=v9&appid=23035354&appsecret=8YvlPNrz", {
      headers,
    });
    weatherData.value = await fetchweatherData.json();
    return { weatherData };
  },
};
</script>

使用 suspense 显示数据加载中的信息

创建一个父组件 WeatherForec.vue, 引入子组件WeatherForecast.vue
使用 <Suspense></Suspense>包裹所有异步组件相关代码
<Suspense></Suspense> 下 <template #default></template> 插槽包裹异步组件
<Suspense></Suspense> 下 <template #fallback></template> 插槽包裹渲染异步组件之前的内容

其代码如下：

<template>
  <div>
    <h1>七日天气预报</h1>
  </div>
  <!-- <suspense> 组件有两个插槽。它们都只接收一个直接子节点。
    default 插槽里的节点会尽可能展示出来。
    如果不能，则展示 fallback 插槽里的节点。 -->
  <suspense>
    <template #default>
      <WeatherForecast />
    </template>
    <template #fallback>
      <h3>数据加载中……</h3>
    </template>
  </suspense>
</template>
<script>
import WeatherForecast from "@/components/WeatherForecast.vue";
export default {
  name: "App",
  components: {
    WeatherForecast
  },
};
</script>

从上面的代码片段中，使用组件 suspense 可以很简单就实现了 loading 的效果，带有 #default 为初始化模板组件，显示异步请求完成之后的 UI 。带有 #fallback 为异步请求中的处理 UI ，即常见的 loading 效果。

与诸君共勉，为自己加油！

参考文档

后记：Hello 小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富文章的动力！GitHub 地址

文档协议

db 的文档库由 db 采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。
基于 github.com/danygitgit上的作品创作。
本许可协议授权之外的使用权限可以从 creativecommons.org/licenses/by… 处获得。

Vue3应用——关于suspense

关于suspense

前言

一、suspense介绍及使用场景

二、suspense的用法

参考文档

文档协议