P12: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更多的用法。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P12:Suspense-初识异步请求组件

发表评论

提供最优质的资源集合

立即查看 了解详情