useFetch的options参数非常重要
function useFetch(
url: string | Request | Ref<string | Request> | () => string | Request,
options?: UseFetchOptions<DataT>
): Promise<AsyncData<DataT>>
type UseFetchOptions = {
key?: string
method?: string
params?: SearchParams
body?: RequestInit['body'] | Record<string, any>
headers?: { key: string, value: string }[]
baseURL?: string
server?: boolean
lazy?: boolean
immediate?: boolean
default?: () => DataT
transform?: (input: DataT) => DataT
pick?: string[]
watch?: WatchSource[]
}
type AsyncData<DataT> = {
data: Ref<DataT>
pending: Ref<boolean>
refresh: (opts?: { dedupe?: boolean }) => Promise<void>
execute: () => Promise<void>
error: Ref<Error | boolean>
}
常用options字段介绍
| 字段 | 解释 |
|---|
key | 请求的唯一key，确保数据获取可以跨请求正确去重，如果没有提供，它将根据使用的静态代码位置生成。tips：如果该接口仅需要在ssr服务端请求，必须将该值设为固定唯一值 |
method | 请求方法,GET、POST、DELETE、PUT等 |
params | query参数 |
body | body参数 |
headers | 请求标头 |
server | 是否获取服务器上的数据（默认为true） |
pick | 过滤响应结果，目前仅支持选中数组键，一般的api都是返回对象，所以该字段用处不大 |
transform | 过滤响应结果（推荐使用） |