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