Skip to content

通过customRef封装的useLoading hooks函数


基于 customRef 的并发 loading 计数 hook, 避免并发请求导致loading状态其他结束

loading
ts
import { customRef } from 'vue'

/**
 * useLoading - 一个基于 customRef 的并发 loading 计数 hook
 */
export function useLoading() {
  let loadingCount = 0

  const isLoading = customRef<boolean>((track, trigger) => ({
    get() {
      track()
      return loadingCount > 0
    },

    set(value: boolean) {
      if (value) {
        loadingCount++
      } else {
        loadingCount = Math.max(0, loadingCount - 1)
      }
      trigger()
    }
  }))

  /**
   * setLoading - 控制 loading 状态
   * @param {boolean} value true 增加 loading 计数,传 false 减少 loading 计数
   */
  function setLoading(value: boolean): void {
    isLoading.value = value
  }

  /**
   * resetLoading - 重置 loadingCount 为 0,并触发一次更新
   */
  function resetLoading(): void {
    loadingCount = 0
    // 触发一次更新
    isLoading.value = false
  }

  return { isLoading, setLoading, resetLoading }
}

Released under the MIT License.