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
更多的用法。
码云笔记 » 12. Suspense-初识异步请求组件