diff --git a/packages/integrations/useAxios/index.ts b/packages/integrations/useAxios/index.ts index f5ee6d7bf5a..2cb9cc7e938 100644 --- a/packages/integrations/useAxios/index.ts +++ b/packages/integrations/useAxios/index.ts @@ -2,12 +2,61 @@ import { Ref, ref, shallowRef } from 'vue-demi' import axios, { AxiosError, AxiosRequestConfig, AxiosResponse, CancelTokenSource, AxiosInstance } from 'axios' export interface UseAxiosReturn { + + /** + * Axios Response + */ response: Ref | undefined> + + /** + * Axios response data + */ data: Ref + + /** + * @deprecated use isFinished instead + */ finished: Ref + + /** + * @deprecated use isLoading instead + */ loading: Ref + + /** + * Indicates if the request has finished + */ + isFinished: Ref + + /** + * Indicates if the request is currently loading + */ + isLoading: Ref + + /** + * @deprecated use aborted instead + */ canceled: Ref + + /** + * Indicates if the request was canceled + */ + aborted: Ref + + /** + * Any erros that may have occurred + */ error: Ref | undefined> + + /** + * @deprecated use abort instead + */ + cancel: (message?: string | undefined) => void + + /** + * Aborts the current request + */ + abort: (message?: string | undefined) => void } export function useAxios(url: string, config?: AxiosRequestConfig): UseAxiosReturn @@ -44,19 +93,19 @@ export function useAxios(url: string, ...args: any[]) { const response = shallowRef>() const data = shallowRef() - const finished = ref(false) - const loading = ref(true) - const canceled = ref(false) + const isFinished = ref(false) + const isLoading = ref(true) + const aborted = ref(false) const error = shallowRef>() const cancelToken: CancelTokenSource = axios.CancelToken.source() - const cancel = (message?: string) => { - if (finished.value || !loading.value) return + const abort = (message?: string) => { + if (isFinished.value || !isLoading.value) return cancelToken.cancel(message) - canceled.value = true - loading.value = false - finished.value = false + aborted.value = true + isLoading.value = false + isFinished.value = false } instance(url, { ...config, cancelToken: cancelToken.token }) @@ -68,17 +117,21 @@ export function useAxios(url: string, ...args: any[]) { error.value = e }) .finally(() => { - loading.value = false - finished.value = true + isLoading.value = false + isFinished.value = true }) return { response, data, error, - finished, - loading, - cancel, - canceled, + finished: isFinished, + loading: isLoading, + isFinished, + isLoading, + cancel: abort, + canceled: aborted, + aborted, + abort, } }