TanStack Query
- 创建查询 queries
必须传入 唯一的键值
import { useQuery } from "@tanstack/vue-query";
const key = computed(()=> key)
// 此处key发生变化，请求会重新发起
useQuery({
queryKey:["key","key2",key]
queryFn:(()=>{})
})
返回的数据有
const { lsLoading, isError, data, error, fetchStatus, isFetching } = useQuery(……)
// 或是
const { status,data, error } = useQuery()
// status === loading
// status === error
// status === success
status与fetchStatus，一个表示请求的结果状态，一个表示请求是否正在进行
isFetching 表示数据正在获取中
- queries 返回列举
| 名称 | 作用 |
|---|---|
| status | 请求状态， loading、error、success |
| isLoading | 是否加载中 |
| isError | 是否返回异常 |
| data[] | 请求数据集合 |
| error[] | 错误集合 |
| fetchStatus | 请求是否进行中的状态 |
| refetch() | 重新出发请求的函数 |
- queries 属性列举
| 名称 | 作用 | 类型 | 可选值 | 参考 |
|---|---|---|---|---|
| refetchOnWindowFocus | 切换页面再重新回到页面时是否重新发起请求 | 布尔类型 | ||
| networkMode | 网络模式 | string | 参考下面的内容 | |
| enabled | 依赖查询，当enabled为true时才发起请求 | |||
| retry | 重试次数，在发生错误时定义重试次数 | |||
| retryDelay | 重试间隔时间 | |||
| keepPreviousData | 缓存分页信息 | 链接 |
- queries retry
retry = 6 // 重试指定次数
retry = true // 一直重试
retry = (failureCount, error) // 自定义重试条件，返回false表示停止重试，返回true会继续重试
// failureCount:失败的次数
-
queries 网络模式
online 网络断开后api请求会被暂停，网络重新链接后会继续刚刚的请求
always 网络断开也会继续api请求
offlineFirst
TanStach Query 提供的hooks
| 名称 | 作用 | |
|---|---|---|
| useQuery() | 创建查询请求 | |
| useIsFetching() | 获取全局查询状态 | |
| useMutation() | 创建修改请求 | |
| useInfiniteQuery() | 创建无限查询 | 链接 |
