【vue hook】useTimeoutLoading-接口请求超过几秒后再显示loading动画

每个页面都重复写同样的逻辑代码,不仅冗余而且效率低下,而vue3的组合式函数就能够复用逻辑。

大家是否有遇到过这样的需求,网速快的时候loading动画会一闪而过,要求接口请求超过0.3s后再显示loading动画。要怎么做呢?

具体思路是定义一个变量loadingVisible来控制loading动画的出现,使用定时器延迟并侦听loading变化。

代码

新建一个useTimeoutLoading.js文件,代码如下

js 复制代码
import { ref, unref, watch, onBeforeUnmount } from 'vue'

const useTimeoutLoading = (loading, time = 500) => {
    let timeout = null
    const loadingVisible = ref(false)
    watch(
        () => unref(loading),
        value => {
            if (timeout) {
                clearTimeout(timeout)
            }
            if (value) {
                timeout = setTimeout(() => {
                    loadingVisible.value = true
                }, time)
            } else {
                loadingVisible.value = false
            }
        }
    )

    onBeforeUnmount(() => {
        if (timeout) {
            clearTimeout(timeout)
        }
    })

    return loadingVisible
}

export default useTimeoutLoading

如何使用

js 复制代码
<script setup>
import { ref } from 'vue'
import useTimeoutLoading from './useTimeoutLoading.js'

const loading = ref(false)
const loadingVisible = useTimeoutLoading(loading)
// 假装请求接口
const getData = async () => {
  loading.value = true
  const res = await getApi()
  loading.value = false
}
getData()
</script>
相关推荐
科兴第一吴彦祖7 分钟前
在线会议系统是一个基于Vue3 + Spring Boot的现代化在线会议管理平台,集成了视频会议、实时聊天、AI智能助手等多项先进技术。
java·vue.js·人工智能·spring boot·推荐算法
沙尘暴炒饭15 分钟前
前端vue使用canvas封装图片标注功能,鼠标画矩形框,标注文字 包含下载标注之后的图片
前端·vue.js·计算机外设
百思可瑞教育35 分钟前
Vue中使用keep-alive实现页面前进刷新、后退缓存的完整方案
前端·javascript·vue.js·缓存·uni-app·北京百思可瑞教育
木心操作2 小时前
js生成excel表格进阶版
开发语言·javascript·ecmascript
GISer_Jing2 小时前
sqb&ks二面(准备)
前端·javascript·面试
前端码虫2 小时前
2.9Vue创建项目(组件)的补充
javascript·vue.js·学习
夜宵饽饽2 小时前
上下文工程实践 - 工具管理(上篇)
javascript·后端
汤姆Tom2 小时前
JavaScript Proxy 对象详解与应用
前端·javascript
BillKu2 小时前
Vue3中app.mount(“#app“)应用挂载原理解析
javascript·vue.js·css3