Skip to content

useAxios

axios 的封装。

¥Wrapper for axios.

示例

Loading: true
Finished: false
Aborted: 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')

或使用 axios 的实例

¥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
)

使用带有配置选项的 axios 实例

¥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
)

当你没有通过 url。默认值为 {immediate: false}

¥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)

这里的 execute 函数 url 是可选的,url2 将取代 url1

¥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)

execute 函数只能接受 config

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

execute 函数根据网络请求的结果进行解析。

¥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)

使用带有 immediate 选项的 axios 实例

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

类型声明

显示类型声明
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
>>

源代码

源代码示例文档

变更日志

最近没有更改