useAxios
对 axios 的封装。
示例
Available in the @vueuse/integrations add-on.安装
bash
npm i axios@^1用法
ts
import { useAxios } from '@vueuse/integrations/useAxios'
const { data, isFinished } = useAxios('/api/posts')返回值
| 属性 | 类型 | 说明 |
|---|---|---|
data | Ref<T> | 响应数据 |
response | Ref<AxiosResponse> | 完整的 axios 响应 |
error | Ref<unknown> | 请求失败时的错误 |
isFinished | Ref<boolean> | 请求是否完成（成功或错误） |
isLoading | Ref<boolean> | 请求是否进行中 |
isAborted | Ref<boolean> | 请求是否已被中止 |
abort / cancel | () => void | 中止当前请求 |
execute | (url?, config?) => Promise | 执行/重新执行请求 |
使用 Axios 实例
ts
import { useAxios } from '@vueuse/integrations/useAxios'
import axios from 'axios'
const instance = axios.create({
baseURL: '/api',
})
const { data, isFinished } = useAxios('/posts', instance)使用配置选项
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 时，默认不会立即发送请求：
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 函数也可以只接受配置对象：
ts
import { useAxios } from '@vueuse/integrations/useAxios'
const { execute } = useAxios(url1, { method: 'GET' }, { immediate: false })
execute({ params: { key: 1 } })
execute({ params: { key: 2 } })等待结果
返回值是一个可等待（thenable）的对象，因此你可以使用 await：
ts
import { useAxios } from '@vueuse/integrations/useAxios'
const { data, isFinished, error } = await useAxios('/api/posts')
// 此时 data 已被填充或者等待 execute 函数的结果：
ts
import { useAxios } from '@vueuse/integrations/useAxios'
const { execute } = useAxios()
const result = await execute(url)选项
ts
const { data } = useAxios('/api/posts', config, instance, {
// 是否立即执行（默认：如果提供了 url 则为 true）
immediate: true,
// 是否使用 shallowRef 来储存数据（默认：true）
shallow: true,
// 新的 execute 执行时是否中止上一个请求（默认：true）
abortPrevious: true,
// 执行前是否重置数据（默认：false）
resetOnExecute: false,
// 初始数据值
initialData: [],
// 回调函数
onSuccess: data => console.log('成功:', data),
onError: error => console.error('错误:', error),
onFinish: () => console.log('已完成'),
})类型声明
显示类型声明
ts
export interface UseAxiosReturn<
T,
R = AxiosResponse<T>,
_D = any,
O extends UseAxiosOptions = UseAxiosOptions<T>,
> {
/**
* Axios 响应
*/
response: ShallowRef<R | undefined>
/**
* Axios 响应数据
*/
data: O extends UseAxiosOptionsWithInitialData<T>
? Ref<T>
: Ref<T | undefined>
/**
* 表示请求是否已完成
*/
isFinished: Ref<boolean>
/**
* 表示请求是否当前正在加载
*/
isLoading: Ref<boolean>
/**
* 表示请求是否已被取消
*/
isAborted: Ref<boolean>
/**
* 可能发生的任何错误
*/
error: ShallowRef<unknown | undefined>
/**
* 中止当前请求
*/
abort: (message?: string | undefined) => void
/**
* `abort` 的别名
*/
cancel: (message?: string | undefined) => void
/**
* `isAborted` 的别名
*/
isCanceled: Ref<boolean>
}
export interface StrictUseAxiosReturn<
T,
R,
D,
O extends UseAxiosOptions = UseAxiosOptions<T>,
> extends UseAxiosReturn<T, R, D, O> {
/**
* 手动调用 axios 请求
*/
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> {
/**
* 手动调用 axios 请求
*/
execute: (
url: string,
config?: AxiosRequestConfig<D>,
) => Promise<EasyUseAxiosReturn<T, R, D>>
}
export interface UseAxiosOptionsBase<T = any> {
/**
* 当使用 `useAxios` 时，是否自动运行 axios 请求
*/
immediate?: boolean
/**
* 使用 shallowRef。
*
* @default true
*/
shallow?: boolean
/**
* 当发起新请求时，中止前一个请求。
*
* @default true
*/
abortPrevious?: boolean
/**
* 在捕获错误时的回调。
*/
onError?: (e: unknown) => void
/**
* 在捕获成功时的回调。
*/
onSuccess?: (data: T) => void
/**
* 在执行 Promise 之前将状态设置为 initialState。
*/
resetOnExecute?: boolean
/**
* 请求完成时的回调。
*/
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
一纸忘忧
jahnli
Anthony Fu
丶远方
Jean-Baptiste AUBRÉE
azaleta
wheat
Jakub Freisler
Jelf
马灿
lstoeferle
Marcos Dantas
一纸忘忧
Vida Xie
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