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 {};},
};

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

vue3 Suspense 异步请求组件使用相关推荐

一、uniapp项目（封装异步请求、moment.js时间处理、封装手势滑动组件、下载图片到本地）
一.封装异步请求: 1. 为什么要封装? 2. 封装的思路 export default (params) => {// 显示加载中uni.showLoading({title: "加 ...
Vue3 父传子、使用 defineAsyncComponent 异步挂载组件、利用 is 动态引入组件
1.父组件 index.vue defineAsyncComponent 是 Vue3 的异步挂载 <template><div v-for="v in nav_items ...
处理vue异步请求数据动态从父组件向子组件赋值时，子组件无法获取到值问题
1. 组件执行顺序导致: 父组件:created->子组件:created->子组件:mounted->父组件:mounted 2.问题子组件无法获取到值 //父组件 exp ...
Spring Boot 异步请求和异步调用
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试文章一.Spring Boot中异步请求的使用 1.异步请求与同步请求 ...
html弹窗赋值给查询框,bootstrap模态框动态赋值， ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框（JS）...
/查询单个 function query(id) { $.ajax({ url : "/small/productServlet", async : true, type : &q ...
[转]掌握Ajax 第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 [IBM]
转自:http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步 ...
Spring Boot 异步请求和异步调用，一文搞定！
一.Spring Boot中异步请求的使用 1.异步请求与同步请求特点: 可以先释放容器分配给请求的线程与相关资源,减轻系统负担,释放了容器所分配线程的请求,其响应将被延后,可以在耗时处理完成(例如 ...
springMVC获取异步请求的参数,返回异步请求数据(json),跨域访问简单了解,文件上传,与Restful风格
springMVC获取异步请求的参数 JQuery发送异步请求回顾 <a href="javascript:void(0);" id="testAjax" ...
react中实现异步请求的方法一，react-thunk
写在前面: 在react中,dispatch是同步执行reducers生成新状态的,对于页面的操作没有问题:但是如果点击事件是请求了某个结果,需要等待结果响应后再更新视图呢?应该如何处理?这里就用到了 ...

vue3 Suspense 异步请求组件使用

Suspense 异步请求组件使用

处理异步请求错误

vue3 Suspense 异步请求组件使用相关推荐

最新文章

热门文章