Skip to content

useAxios

Category
Export Size
1.39 kB
Package
@vueuse/integrations
Last Changed
6 months ago

Wrapper for axios.

Demo

Loading: false
Finished: true
Aborted: false
userId: 1
id: 1
title: delectus aut autem
completed: false
Available in the @vueuse/integrations add-on.

Install

bash
npm i axios@^1

Usage

ts
import { 
useAxios
} from '@vueuse/integrations/useAxios'
const {
data
,
isFinished
} =
useAxios
('/api/posts')

or use an instance of axios

ts
import { 
useAxios
} from '@vueuse/integrations/useAxios'
import
axios
from 'axios'
const
instance
=
axios
.
create
({
baseURL
: '/api',
}) const {
data
,
isFinished
} =
useAxios
('/posts',
instance
)

use an instance of axios with config options

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
)

When you don't pass the url. The default value is {immediate: false}

ts
import { 
useAxios
} from '@vueuse/integrations/useAxios'
const {
execute
} =
useAxios
()
execute
(url)

The execute function url here is optional, and url2 will replace the url1.

ts
import { 
useAxios
} from '@vueuse/integrations/useAxios'
const {
execute
} =
useAxios
(url1, {}, {
immediate
: false })
execute
(url2)

The execute function can accept config only.

ts
import { 
useAxios
} from '@vueuse/integrations/useAxios'
const {
execute
} =
useAxios
(url1, {
method
: 'GET' }, {
immediate
: false })
execute
({
params
: {
key
: 1 } })
execute
({
params
: {
key
: 2 } })

The execute function resolves with a result of network request.

ts
import { 
useAxios
} from '@vueuse/integrations/useAxios'
const {
execute
} =
useAxios
()
const
result
= await
execute
(url)

use an instance of axios with immediate options

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,
})

Type Declarations

Show Type Declarations
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
>>

Source

SourceDemoDocs

Contributors

Anthony Fu
jahnli
丶远方
Jean-Baptiste AUBRÉE
Anthony Fu
azaleta
wheat
Jakub Freisler
Jelf
马灿
lstoeferle
Marcos Dantas
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

Changelog

v12.3.0 on
8502f - fix: narrow type of data when initialValue is provided (#4419)
v12.0.0-beta.1 on
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)
v10.8.0 on
b94de - feat: support abortPrevious option (#3735)
v10.7.2 on
37eae - fix: ignore undefined options (#3662)
v10.7.0 on
4b159 - fix: reset isAborted value on success (#3547)
v10.6.0 on
151f9 - fix: bail out on request abort (#3394)
v10.2.0 on
b1701 - fix: prevent premature loading refs reset (#3076)
v10.0.0-beta.5 on
cb644 - refactor!: remove isFunction and isString utils
v10.0.0-beta.4 on
edece - fix!: reject promise on execute (#2485)
f54a3 - feat: added initialData and resetOnExecute options (#2791)
v10.0.0-beta.3 on
1f8b9 - fix!: remove deprecated apis
v10.0.0-beta.2 on
a2f33 - feat: added onFinish callback (#2829)

Released under the MIT License.

Build faster with AI
New Masterclass to help you leverage AI in your Vue workflow
Get Early Access