useAxios
wrapper for axios
Demo
available in add-on @vueuse/integrationsInstall
npm i axios
npm i axios
Usage
import { useAxios } from '@vueuse/integrations/useAxios'
const { data, isFinished } = useAxios('/api/posts')
import { useAxios } from '@vueuse/integrations/useAxios'
const { data, isFinished } = useAxios('/api/posts')
or use an instance of axios
import axios from 'axios'
import { useAxios } from '@vueuse/integrations/useAxios'
const instance = axios.create({
baseURL: '/api',
})
const { data, isFinished } = useAxios('/posts', instance)
import axios from 'axios'
import { useAxios } from '@vueuse/integrations/useAxios'
const instance = axios.create({
baseURL: '/api',
})
const { data, isFinished } = useAxios('/posts', instance)
use an instance of axios with config options
import axios from 'axios'
import { useAxios } from '@vueuse/integrations/useAxios'
const instance = axios.create({
baseURL: '/api',
})
const { data, isFinished } = useAxios('/posts', { method: 'POST' }, instance)
import axios from 'axios'
import { useAxios } from '@vueuse/integrations/useAxios'
const instance = axios.create({
baseURL: '/api',
})
const { data, isFinished } = useAxios('/posts', { method: 'POST' }, instance)
When you don't pass the url. The default value is {immediate: false}
import { useAxios } from '@vueuse/integrations/useAxios'
const { execute } = useAxios()
execute(url)
import { useAxios } from '@vueuse/integrations/useAxios'
const { execute } = useAxios()
execute(url)
The execute function url here is optional, and url2 will replace the url1.
import { useAxios } from '@vueuse/integrations/useAxios'
const { execute } = useAxios(url1, {}, { immediate: false })
execute(url2)
import { useAxios } from '@vueuse/integrations/useAxios'
const { execute } = useAxios(url1, {}, { immediate: false })
execute(url2)
The execute function resolves with a result of network request.
import { useAxios } from '@vueuse/integrations/useAxios'
const { execute } = useAxios()
const result = await execute(url)
import { useAxios } from '@vueuse/integrations/useAxios'
const { execute } = useAxios()
const result = await execute(url)
use an instance of axios with immediate options
import axios from 'axios'
import { useAxios } from '@vueuse/integrations/useAxios'
const instance = axios.create({
baseURL: '/api',
})
const { data, isFinished } = useAxios('/posts', { method: 'POST' }, instance, {
immediate: false,
})
import axios from 'axios'
import { useAxios } from '@vueuse/integrations/useAxios'
const instance = axios.create({
baseURL: '/api',
})
const { data, isFinished } = useAxios('/posts', { method: 'POST' }, instance, {
immediate: false,
})
Type Declarations
Show Type Declarations
export interface UseAxiosReturn<T> {
/**
* Axios Response
*/
response: ShallowRef<AxiosResponse<T> | undefined>
/**
* Axios response data
*/
data: 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<AxiosError<T> | undefined>
/**
* Aborts the current request
*/
abort: (message?: string | undefined) => void
/**
* isFinished alias
* @deprecated use `isFinished` instead
*/
finished: Ref<boolean>
/**
* isLoading alias
* @deprecated use `isLoading` instead
*/
loading: Ref<boolean>
/**
* isAborted alias
* @deprecated use `isAborted` instead
*/
aborted: Ref<boolean>
/**
* abort alias
*/
cancel: (message?: string | undefined) => void
/**
* isAborted alias
* @deprecated use `isCanceled` instead
*/
canceled: Ref<boolean>
/**
* isAborted alias
*/
isCanceled: Ref<boolean>
}
export interface StrictUseAxiosReturn<T> extends UseAxiosReturn<T> {
/**
* Manually call the axios request
*/
execute: (
url?: string,
config?: AxiosRequestConfig
) => PromiseLike<StrictUseAxiosReturn<T>>
}
export interface EasyUseAxiosReturn<T> extends UseAxiosReturn<T> {
/**
* Manually call the axios request
*/
execute: (
url: string,
config?: AxiosRequestConfig
) => PromiseLike<EasyUseAxiosReturn<T>>
}
export interface UseAxiosOptions {
/**
* Will automatically run axios request when `useAxios` is used
*
*/
immediate?: boolean
}
export declare function useAxios<T = any>(
url: string,
config?: AxiosRequestConfig,
options?: UseAxiosOptions
): StrictUseAxiosReturn<T> & PromiseLike<StrictUseAxiosReturn<T>>
export declare function useAxios<T = any>(
url: string,
instance?: AxiosInstance,
options?: UseAxiosOptions
): StrictUseAxiosReturn<T> & PromiseLike<StrictUseAxiosReturn<T>>
export declare function useAxios<T = any>(
url: string,
config: AxiosRequestConfig,
instance: AxiosInstance,
options?: UseAxiosOptions
): StrictUseAxiosReturn<T> & PromiseLike<StrictUseAxiosReturn<T>>
export declare function useAxios<T = any>(
config?: AxiosRequestConfig
): EasyUseAxiosReturn<T> & PromiseLike<EasyUseAxiosReturn<T>>
export declare function useAxios<T = any>(
instance?: AxiosInstance
): EasyUseAxiosReturn<T> & PromiseLike<EasyUseAxiosReturn<T>>
export declare function useAxios<T = any>(
config?: AxiosRequestConfig,
instance?: AxiosInstance
): EasyUseAxiosReturn<T> & PromiseLike<EasyUseAxiosReturn<T>>
export interface UseAxiosReturn<T> {
/**
* Axios Response
*/
response: ShallowRef<AxiosResponse<T> | undefined>
/**
* Axios response data
*/
data: 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<AxiosError<T> | undefined>
/**
* Aborts the current request
*/
abort: (message?: string | undefined) => void
/**
* isFinished alias
* @deprecated use `isFinished` instead
*/
finished: Ref<boolean>
/**
* isLoading alias
* @deprecated use `isLoading` instead
*/
loading: Ref<boolean>
/**
* isAborted alias
* @deprecated use `isAborted` instead
*/
aborted: Ref<boolean>
/**
* abort alias
*/
cancel: (message?: string | undefined) => void
/**
* isAborted alias
* @deprecated use `isCanceled` instead
*/
canceled: Ref<boolean>
/**
* isAborted alias
*/
isCanceled: Ref<boolean>
}
export interface StrictUseAxiosReturn<T> extends UseAxiosReturn<T> {
/**
* Manually call the axios request
*/
execute: (
url?: string,
config?: AxiosRequestConfig
) => PromiseLike<StrictUseAxiosReturn<T>>
}
export interface EasyUseAxiosReturn<T> extends UseAxiosReturn<T> {
/**
* Manually call the axios request
*/
execute: (
url: string,
config?: AxiosRequestConfig
) => PromiseLike<EasyUseAxiosReturn<T>>
}
export interface UseAxiosOptions {
/**
* Will automatically run axios request when `useAxios` is used
*
*/
immediate?: boolean
}
export declare function useAxios<T = any>(
url: string,
config?: AxiosRequestConfig,
options?: UseAxiosOptions
): StrictUseAxiosReturn<T> & PromiseLike<StrictUseAxiosReturn<T>>
export declare function useAxios<T = any>(
url: string,
instance?: AxiosInstance,
options?: UseAxiosOptions
): StrictUseAxiosReturn<T> & PromiseLike<StrictUseAxiosReturn<T>>
export declare function useAxios<T = any>(
url: string,
config: AxiosRequestConfig,
instance: AxiosInstance,
options?: UseAxiosOptions
): StrictUseAxiosReturn<T> & PromiseLike<StrictUseAxiosReturn<T>>
export declare function useAxios<T = any>(
config?: AxiosRequestConfig
): EasyUseAxiosReturn<T> & PromiseLike<EasyUseAxiosReturn<T>>
export declare function useAxios<T = any>(
instance?: AxiosInstance
): EasyUseAxiosReturn<T> & PromiseLike<EasyUseAxiosReturn<T>>
export declare function useAxios<T = any>(
config?: AxiosRequestConfig,
instance?: AxiosInstance
): EasyUseAxiosReturn<T> & PromiseLike<EasyUseAxiosReturn<T>>
Source
Contributors
Anthony Fu
wheat
Jean-Baptiste AUBRÉE
Jelf
马灿
lstoeferle
Marcos Dantas
Jakub Freisler
Kasper Seweryn
webfansplz
WuLianN
unknown_
Manaus
Alex Kozack
Victor
Antério Vieira