diff --git a/packages/integrations/useAxios/index.test.ts b/packages/integrations/useAxios/index.test.ts index 58f8065079e..793006a4134 100644 --- a/packages/integrations/useAxios/index.test.ts +++ b/packages/integrations/useAxios/index.test.ts @@ -280,4 +280,24 @@ describe('useAxios', () => { const { error } = await execute() expect(error.value).toBeDefined() }) + + test('should call onSuccess when success', async () => { + const onSuccess = vitest.fn() + const { execute, isLoading, isFinished, data } = useAxios(url, config, { ...options, onSuccess }) + expect(isLoading.value).toBeFalsy() + await execute() + expect(onSuccess).toHaveBeenCalledWith(data.value) + expect(isFinished.value).toBeTruthy() + expect(isLoading.value).toBeFalsy() + }) + + test('should call onError when error', async () => { + const onError = vitest.fn() + const { execute, error, isLoading, isFinished } = useAxios(url, config, { ...options, onError }) + expect(isLoading.value).toBeFalsy() + await execute('https://jsonplaceholder.typicode.com/todos/2/3') + expect(onError).toHaveBeenCalledWith(error.value) + expect(isFinished.value).toBeTruthy() + expect(isLoading.value).toBeFalsy() + }) }) diff --git a/packages/integrations/useAxios/index.ts b/packages/integrations/useAxios/index.ts index 6aa4e88feec..d843fe78d57 100644 --- a/packages/integrations/useAxios/index.ts +++ b/packages/integrations/useAxios/index.ts @@ -86,7 +86,7 @@ export interface EasyUseAxiosReturn extends UseAxiosReturn { */ execute: (url: string, config?: RawAxiosRequestConfig) => PromiseLike> } -export interface UseAxiosOptions { +export interface UseAxiosOptions { /** * Will automatically run axios request when `useAxios` is used * @@ -98,12 +98,22 @@ export interface UseAxiosOptions { * @default true */ shallow?: boolean + + /** + * Callback when error is caught. + */ + onError?: (e: unknown) => void + + /** + * Callback when success is caught. + */ + onSuccess?: (data: T) => void } type OverallUseAxiosReturn = StrictUseAxiosReturn | EasyUseAxiosReturn -export function useAxios, D = any>(url: string, config?: RawAxiosRequestConfig, options?: UseAxiosOptions): StrictUseAxiosReturn & PromiseLike> -export function useAxios, D = any>(url: string, instance?: AxiosInstance, options?: UseAxiosOptions): StrictUseAxiosReturn & PromiseLike> -export function useAxios, D = any>(url: string, config: RawAxiosRequestConfig, instance: AxiosInstance, options?: UseAxiosOptions): StrictUseAxiosReturn & PromiseLike> +export function useAxios, D = any>(url: string, config?: RawAxiosRequestConfig, options?: UseAxiosOptions): StrictUseAxiosReturn & PromiseLike> +export function useAxios, D = any>(url: string, instance?: AxiosInstance, options?: UseAxiosOptions): StrictUseAxiosReturn & PromiseLike> +export function useAxios, D = any>(url: string, config: RawAxiosRequestConfig, instance: AxiosInstance, options?: UseAxiosOptions): StrictUseAxiosReturn & PromiseLike> export function useAxios, D = any>(config?: RawAxiosRequestConfig): EasyUseAxiosReturn & PromiseLike> export function useAxios, D = any>(instance?: AxiosInstance): EasyUseAxiosReturn & PromiseLike> export function useAxios, D = any>(config?: RawAxiosRequestConfig, instance?: AxiosInstance): EasyUseAxiosReturn & PromiseLike> @@ -118,7 +128,7 @@ export function useAxios, D = any>(...args: any[]) const argsPlaceholder = isString(url) ? 1 : 0 let defaultConfig: RawAxiosRequestConfig = {} let instance: AxiosInstance = axios - let options: UseAxiosOptions = { immediate: !!argsPlaceholder, shallow: true } + let options: UseAxiosOptions = { immediate: !!argsPlaceholder, shallow: true } const isAxiosInstance = (val: any) => !!val?.request @@ -190,10 +200,13 @@ export function useAxios, D = any>(...args: any[]) instance(_url, { ...defaultConfig, ...typeof executeUrl === 'object' ? executeUrl : config, cancelToken: cancelToken.token }) .then((r: any) => { response.value = r - data.value = r.data + const result = r.data + data.value = result + options.onSuccess?.(result) }) .catch((e: any) => { error.value = e + options.onError?.(e) }) .finally(() => loading(false)) return { then }