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 { cancel } = useRequest('url')

cancel()

默认数据格式

const { data } = useRequest('url', {
  initialData: {},
})

// 接口请求之前，data = initialData

数据分页

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

定时轮询

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

// 主动取消轮询
// cancel()

聚焦时重新请求

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