12. Suspense-初识异步请求组件

前端开发中,异步请求组件必不可少。比如读取远程图片,比如调用后台接口,这些都需要异步请求。在 Vue2.x 时代,判断异步请求的状态是一件必须的事情,但是这些状态都要自己处理,根据请求是否完毕展示不同的界面。尤大神深知民间饥苦,在 Vue3.x 中给我们提供了Suspense组件。本文我们就先简单学习一下。

编写 AsyncShow.vue 自定义组件

在北海九号餐厅随机选择服务菜单那节中,已经作了一个异步请求的组件,并且是简单处理了请求状态的。学会Suspense之后,就不用自己手写这些业务逻辑处理请求状态了,Suspense提供两个 template 的位置,一个是没有请求回来时显示的内容,一个是全部请求完毕的内容。这样进行异步内容的渲染就会非常简单。

注意点:如果你要使用Suspense的话,要返回一个 promise 对象,而不是原来的那种JSON对象。

我们先用一个例子来感受一下,我们先来写一个组件,在components文件夹下边,新建一个AsyncShow.vue文件,然后边下代码如下:

<template>
  <h1>{{ result }}</h1>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  setup() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        return resolve({ result: "mybj123.com" });
      }, 2000);
    });
  },
});
</script>

defineComponent是用来解决 TypeScript 情况下,传统的Vue.extends无法对组件给出正确的参数类型推断的。也就是说在 TypeScript 环境中如果参数类型推断不正常时,用defineComponent()组件来进行包装函数。

然后我们new了一个Promise对象,然后用setTimeout等待两秒后返回mybj123.com文字就可以了。

组件写起来并没有什么难点,下面就是把这个组件放置到App.vue中。

使用 Suspense 组件

下面我们把App.vue文件中以前写的代码尽量清理干净。

<template>
  <div>
  </div>
</template>
<script lang="ts">
import { ref } from "vue";
import useUrlAxios from "../src/hooks/useURLAxios";
const app = {
  name: "App",
  components: { },
  setup() {
    return {};
  },
};
export default app;
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

然后先把刚才编写好的自定义组件AsyncShow.vue组件引进过来。代码如下:

import AsyncShow from "./components/AsyncShow.vue";

引入之后,想使用这个组件,记得要再components中进行声明,也就是把AsyncShow放入到components中。

const app = {
  name: "App",
  components: { AsyncShow },
  setup() {
    return {};
  },
};

这样自定义组件就可以使用了,我们的自定组件已经返回了Pronmise结果,所以可以直接使用Suspense来控制状态和输出内容。在 app.vue 中 template 中写如下代码:

<template>
  <div>
    <Suspense>
      <template #default>
        <AsyncShow />
      </template>
      <template #fallback>
        <h1>Loading...</h1>
      </template>
    </Suspense>
  </div>
</template>

可以看到Suspense是有两个template插槽的,第一个default代表异步请求完成后,显示的模板内容。fallback代表在加载中时,显示的模板内容。

写完后,用npm run serve打开测试服务,看一下结果。如果一切正常,你可以看到,当我们打开页面时,首先显示的是Loading,然后才会显示mybj123.com。也就是 promise 返回的结果。

初步认识一下 Suspense 组件

这节算是初步认识一下Suspense组件,下节我们继续深入学习Suspense更多的用法。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 12. Suspense-初识异步请求组件

发表回复