🏕️

vue-use-api

Vue Composition API 异步数据请求的 Hook 库

核心特性

自动 / 手动请求

屏幕聚焦重新请求

轮询 / 防抖 / 节流

缓存

快速上手

安装


npm i vue-use-api

使用


import { useRequest } from "vue-use-api"

// 直接传递 URL
const { data, loading, error } = useRequest('url')

// 传递 Promise，如 axios
useRequest(axios.get('url'))

更多功能

手动触发请求


const { run } = useRequest('url', {
  manual: true,
})

run()

数据分页


const { data, loading, total, current, pageSize, reload } = usePagination('url', {
  defaultParams: [{ page: 1, pagesize: 2 }],
})

定时轮询


useRequest("url", {
  pollingInterval: 1000, // 间隔时间/毫秒
  pollingWhenHidden: true, // 屏幕不可见时轮询
  pollingWhenOffline: true, // 网络离线时轮询
    onSuccess: data => {},
})

聚焦时重新请求


useRequest("url", {
  refreshOnWindowFocus: true,
  refocusTimespan: 2 * 1000, // 防止频繁触发
})