useAxios
axios 的封装。
演示
可在 @vueuse/integrations 插件中使用。安装
bash
npm i axios@^1用法
ts
import { useAxios } from '@vueuse/integrations/useAxios'
const { data, isFinished } = useAxios('/api/posts')或使用 axios 实例
ts
import { useAxios } from '@vueuse/integrations/useAxios'
import axios from 'axios'
const instance = axios.create({
baseURL: '/api',
})
const { data, isFinished } = useAxios('/posts', instance)使用带配置选项的 axios 实例
ts
import { useAxios } from '@vueuse/integrations/useAxios'
import axios from 'axios'
const instance = axios.create({
baseURL: '/api',
})
const { data, isFinished } = useAxios('/posts', { method: 'POST' }, instance)当你不传入 url 时，默认值为 {immediate: false}
ts
import { useAxios } from '@vueuse/integrations/useAxios'
const { execute } = useAxios()
execute(url)这里的 execute 函数的 url 是可选的，url2 将会替换 url1。
ts
import { useAxios } from '@vueuse/integrations/useAxios'
const { execute } = useAxios(url1, {}, { immediate: false })
execute(url2)execute 函数只能接受 config。
ts
import { useAxios } from '@vueuse/integrations/useAxios'
const { execute } = useAxios(url1, { method: 'GET' }, { immediate: false })
execute({ params: { key: 1 } })
execute({ params: { key: 2 } })execute 函数返回网络请求的结果。
ts
import { useAxios } from '@vueuse/integrations/useAxios'
const { execute } = useAxios()
const result = await execute(url)使用带 immediate 选项的 axios 实例
ts
import { useAxios } from '@vueuse/integrations/useAxios'
import axios from 'axios'
const instance = axios.create({
baseURL: '/api',
})
const { data, isFinished } = useAxios('/posts', { method: 'POST' }, instance, {
immediate: false,
})类型声明
显示类型声明
ts
export interface UseAxiosReturn<
T,
R = AxiosResponse<T>,
_D = any,
O extends UseAxiosOptions = UseAxiosOptions<T>,
> {
/**
* Axios Response
*/
response: ShallowRef<R | undefined>
/**
* Axios response data
*/
data: O extends UseAxiosOptionsWithInitialData<T>
? Ref<T>
: Ref<T | undefined>
/**
* Indicates if the request has finished
*/
isFinished: Ref<boolean>
/**
* Indicates if the request is currently loading
*/
isLoading: Ref<boolean>
/**
* Indicates if the request was canceled
*/
isAborted: Ref<boolean>
/**
* Any errors that may have occurred
*/
error: ShallowRef<unknown | undefined>
/**
* Aborts the current request
*/
abort: (message?: string | undefined) => void
/**
* Alias to `abort`
*/
cancel: (message?: string | undefined) => void
/**
* Alias to `isAborted`
*/
isCanceled: Ref<boolean>
}
export interface StrictUseAxiosReturn<
T,
R,
D,
O extends UseAxiosOptions = UseAxiosOptions<T>,
> extends UseAxiosReturn<T, R, D, O> {
/**
* Manually call the axios request
*/
execute: (
url?: string | AxiosRequestConfig<D>,
config?: AxiosRequestConfig<D>,
) => Promise<StrictUseAxiosReturn<T, R, D, O>>
}
export interface EasyUseAxiosReturn<T, R, D> extends UseAxiosReturn<T, R, D> {
/**
* Manually call the axios request
*/
execute: (
url: string,
config?: AxiosRequestConfig<D>,
) => Promise<EasyUseAxiosReturn<T, R, D>>
}
export interface UseAxiosOptionsBase<T = any> {
/**
* Will automatically run axios request when `useAxios` is used
*
*/
immediate?: boolean
/**
* Use shallowRef.
*
* @default true
*/
shallow?: boolean
/**
* Abort previous request when a new request is made.
*
* @default true
*/
abortPrevious?: boolean
/**
* Callback when error is caught.
*/
onError?: (e: unknown) => void
/**
* Callback when success is caught.
*/
onSuccess?: (data: T) => void
/**
* Sets the state to initialState before executing the promise.
*/
resetOnExecute?: boolean
/**
* Callback when request is finished.
*/
onFinish?: () => void
}
export interface UseAxiosOptionsWithInitialData<T>
extends UseAxiosOptionsBase<T> {
/**
* Initial data
*/
initialData: T
}
export type UseAxiosOptions<T = any> =
| UseAxiosOptionsBase<T>
| UseAxiosOptionsWithInitialData<T>
export declare function useAxios<
T = any,
R = AxiosResponse<T>,
D = any,
O extends
UseAxiosOptionsWithInitialData<T> = UseAxiosOptionsWithInitialData<T>,
>(
url: string,
config?: AxiosRequestConfig<D>,
options?: O,
): StrictUseAxiosReturn<T, R, D, O> & Promise<StrictUseAxiosReturn<T, R, D, O>>
export declare function useAxios<
T = any,
R = AxiosResponse<T>,
D = any,
O extends
UseAxiosOptionsWithInitialData<T> = UseAxiosOptionsWithInitialData<T>,
>(
url: string,
instance?: AxiosInstance,
options?: O,
): StrictUseAxiosReturn<T, R, D, O> & Promise<StrictUseAxiosReturn<T, R, D, O>>
export declare function useAxios<
T = any,
R = AxiosResponse<T>,
D = any,
O extends
UseAxiosOptionsWithInitialData<T> = UseAxiosOptionsWithInitialData<T>,
>(
url: string,
config: AxiosRequestConfig<D>,
instance: AxiosInstance,
options?: O,
): StrictUseAxiosReturn<T, R, D, O> & Promise<StrictUseAxiosReturn<T, R, D, O>>
export declare function useAxios<
T = any,
R = AxiosResponse<T>,
D = any,
O extends UseAxiosOptionsBase<T> = UseAxiosOptionsBase<T>,
>(
url: string,
config?: AxiosRequestConfig<D>,
options?: O,
): StrictUseAxiosReturn<T, R, D, O> & Promise<StrictUseAxiosReturn<T, R, D, O>>
export declare function useAxios<
T = any,
R = AxiosResponse<T>,
D = any,
O extends UseAxiosOptionsBase<T> = UseAxiosOptionsBase<T>,
>(
url: string,
instance?: AxiosInstance,
options?: O,
): StrictUseAxiosReturn<T, R, D, O> & Promise<StrictUseAxiosReturn<T, R, D, O>>
export declare function useAxios<
T = any,
R = AxiosResponse<T>,
D = any,
O extends UseAxiosOptionsBase<T> = UseAxiosOptionsBase<T>,
>(
url: string,
config: AxiosRequestConfig<D>,
instance: AxiosInstance,
options?: O,
): StrictUseAxiosReturn<T, R, D, O> & Promise<StrictUseAxiosReturn<T, R, D, O>>
export declare function useAxios<T = any, R = AxiosResponse<T>, D = any>(
config?: AxiosRequestConfig<D>,
): EasyUseAxiosReturn<T, R, D> & Promise<EasyUseAxiosReturn<T, R, D>>
export declare function useAxios<T = any, R = AxiosResponse<T>, D = any>(
instance?: AxiosInstance,
): EasyUseAxiosReturn<T, R, D> & Promise<EasyUseAxiosReturn<T, R, D>>
export declare function useAxios<T = any, R = AxiosResponse<T>, D = any>(
config?: AxiosRequestConfig<D>,
instance?: AxiosInstance,
): EasyUseAxiosReturn<T, R, D> & Promise<EasyUseAxiosReturn<T, R, D>>来源
贡献者
Anthony Fu
Anthony Fu
jahnli
丶远方
Jean-Baptiste AUBRÉE
azaleta
wheat
Jakub Freisler
Jelf
马灿
lstoeferle
Marcos Dantas
NoiseFan
IlyaL
Robin
Julien Huang
OrbisK
jdm1219
GeekTR
Doctorwu
ge Datou
Issayah
Mickaël Oth
Yiyang Sun
sun0day
vaakian X
flyingTodream
Curt Grimes
Kasper Seweryn
webfansplz
WuLianN
unknown_
Manaus
Alex Kozack
Victor
Antério Vieira