🏕️

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, // 防止频繁触发 })