diff --git a/packages/integrations/useAxios/index.test.ts b/packages/integrations/useAxios/index.test.ts index dd6eed11cd5..f0d37a1a972 100644 --- a/packages/integrations/useAxios/index.test.ts +++ b/packages/integrations/useAxios/index.test.ts @@ -301,6 +301,53 @@ describe('useAxios', () => { expect(isLoading.value).toBeFalsy() }) + test('should use initialData', async () => { + const { data } = useAxios(url, config, { ...options, initialData: { value: 1 } }) + expect(data.value).toEqual({ value: 1 }) + }) + + test('should reset data when execute', async () => { + interface ResType { + id: number + title: string + body: string + userId: number + } + const initialData: ResType = { + id: 2, + title: 'title', + body: 'body', + userId: 2, + } + const { data, execute } = useAxios(url, config, { ...options, initialData, resetOnExecute: true }) + expect(data.value).toEqual(initialData) + await execute() + expect(data.value).toEqual({ completed: false, id: 1, title: 'delectus aut autem', userId: 1 }) + await execute('/todos/312') + expect(data.value).toEqual(initialData) + }) + + test('should not reset data when execute', async () => { + interface ResType { + id: number + title: string + body: string + userId: number + } + const initialData: ResType = { + id: 2, + title: 'title', + body: 'body', + userId: 2, + } + const { data, execute } = useAxios(url, config, { ...options, initialData }) + expect(data.value).toEqual(initialData) + await execute() + expect(data.value).toEqual({ completed: false, id: 1, title: 'delectus aut autem', userId: 1 }) + await execute('/todos/312') + expect(data.value).toEqual({ completed: false, id: 1, title: 'delectus aut autem', userId: 1 }) + }) + test('should call onFinish', async () => { const onFinish = vi.fn() const { execute, isLoading, isFinished } = useAxios(url, config, { ...options, onFinish }) diff --git a/packages/integrations/useAxios/index.ts b/packages/integrations/useAxios/index.ts index 6f82a90b78d..3b6aa85f941 100644 --- a/packages/integrations/useAxios/index.ts +++ b/packages/integrations/useAxios/index.ts @@ -1,6 +1,6 @@ import type { Ref, ShallowRef } from 'vue-demi' import { ref, shallowRef } from 'vue-demi' -import { isString, until } from '@vueuse/shared' +import { isString, noop, until } from '@vueuse/shared' import type { AxiosInstance, AxiosRequestConfig, AxiosResponse, CancelTokenSource } from 'axios' import axios, { AxiosError } from 'axios' @@ -85,6 +85,17 @@ export interface UseAxiosOptions { * Callback when success is caught. */ onSuccess?: (data: T) => void + + /** + * Initial data to use + */ + initialData?: T + + /** + * Sets the state to initialState before executing the promise. + */ + resetOnExecute?: boolean + /** * Callback when request is finished. */ @@ -138,8 +149,17 @@ export function useAxios, D = any>(...args: any[]) ) options = args[args.length - 1] + const { + initialData, + shallow, + onSuccess = noop, + onError = noop, + immediate, + resetOnExecute = false, + } = options + const response = shallowRef>() - const data = options.shallow ? shallowRef() : ref() + const data = (shallow ? shallowRef : ref)(initialData!) as Ref const isFinished = ref(false) const isLoading = ref(false) const isAborted = ref(false) @@ -162,6 +182,14 @@ export function useAxios, D = any>(...args: any[]) isLoading.value = loading isFinished.value = !loading } + + /** + * Reset data to initialData + */ + const resetData = () => { + if (resetOnExecute) + data.value = initialData! + } const waitUntilFinished = () => new Promise>((resolve, reject) => { until(isFinished).toBe(true) @@ -182,6 +210,7 @@ export function useAxios, D = any>(...args: any[]) isFinished.value = true return { then } } + resetData() abort() loading(true) instance(_url, { ...defaultConfig, ...typeof executeUrl === 'object' ? executeUrl : config, cancelToken: cancelToken.token }) @@ -189,11 +218,11 @@ export function useAxios, D = any>(...args: any[]) response.value = r const result = r.data data.value = result - options.onSuccess?.(result) + onSuccess(result) }) .catch((e: any) => { error.value = e - options.onError?.(e) + onError(e) }) .finally(() => { options.onFinish?.() @@ -201,7 +230,8 @@ export function useAxios, D = any>(...args: any[]) }) return { then } } - if (options.immediate && url) + + if (immediate && url) (execute as StrictUseAxiosReturn['execute'])() const result = {