【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>
相关推荐
qq_411671989 分钟前
vue3 的模板引用ref和$parent
前端·javascript·vue.js
清幽竹客1 小时前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js
vvilkim1 小时前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js
paopaokaka_luck1 小时前
基于SpringBoot+Vue的电影售票系统(协同过滤算法)
vue.js·spring boot·后端
滿1 小时前
Vue3 父子组件表单滚动到校验错误的位置实现方法
前端·javascript·vue.js
专注VB编程开发20年1 小时前
javascript的类,ES6模块写法在VSCODE中智能提示
开发语言·javascript·vscode
某公司摸鱼前端7 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~7 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程7 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
wen's8 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js