diff --git a/packages/integrations/useAxios/index.test.ts b/packages/integrations/useAxios/index.test.ts index 9054f6d69a8..b069b4ab736 100644 --- a/packages/integrations/useAxios/index.test.ts +++ b/packages/integrations/useAxios/index.test.ts @@ -210,4 +210,42 @@ describe('useAxios', () => { expect(onRejected).toBeCalledTimes(0) }, onRejected) }) + + test('use generic type', async () => { + interface ReqType { + title: string + body: string + userId: number + } + + interface ResType { + id: number + title: string + body: string + userId: number + } + const typeConfig: AxiosRequestConfig = { + method: 'POST', + } + const { isLoading, then, execute } = useAxios('/posts', typeConfig, instance, options) + expect(isLoading.value).toBeFalsy() + const requestData: ReqType = { + title: 'title', + body: 'body', + userId: 123, + } + execute({ data: requestData }) + expect(isLoading.value).toBeTruthy() + const onRejected = vitest.fn() + + await then((result) => { + expect(result.data).toBeDefined() + expect(result.data.value?.title).toBe('title') + expect(result.data.value?.body).toBe('body') + expect(result.data.value?.userId).toBe(123) + expect(result.data.value?.id).toBeDefined() + expect(isLoading.value).toBeFalsy() + expect(onRejected).toBeCalledTimes(0) + }, onRejected) + }) }) diff --git a/packages/integrations/useAxios/index.ts b/packages/integrations/useAxios/index.ts index 057b47108f4..905e538ae74 100644 --- a/packages/integrations/useAxios/index.ts +++ b/packages/integrations/useAxios/index.ts @@ -4,11 +4,11 @@ import { isString, until } from '@vueuse/shared' import type { AxiosError, AxiosInstance, AxiosRequestConfig, AxiosResponse, CancelTokenSource } from 'axios' import axios from 'axios' -export interface UseAxiosReturn { +export interface UseAxiosReturn { /** * Axios Response */ - response: ShallowRef | undefined> + response: ShallowRef | undefined> /** * Axios response data @@ -74,17 +74,17 @@ export interface UseAxiosReturn { */ isCanceled: Ref } -export interface StrictUseAxiosReturn extends UseAxiosReturn { +export interface StrictUseAxiosReturn extends UseAxiosReturn { /** * Manually call the axios request */ - execute: (url?: string | AxiosRequestConfig, config?: AxiosRequestConfig) => PromiseLike> + execute: (url?: string | AxiosRequestConfig, config?: AxiosRequestConfig) => PromiseLike> } -export interface EasyUseAxiosReturn extends UseAxiosReturn { +export interface EasyUseAxiosReturn extends UseAxiosReturn { /** * Manually call the axios request */ - execute: (url: string, config?: AxiosRequestConfig) => PromiseLike> + execute: (url: string, config?: AxiosRequestConfig) => PromiseLike> } export interface UseAxiosOptions { /** @@ -93,24 +93,24 @@ export interface UseAxiosOptions { */ immediate?: boolean } -type OverallUseAxiosReturn = StrictUseAxiosReturn | EasyUseAxiosReturn +type OverallUseAxiosReturn = StrictUseAxiosReturn | EasyUseAxiosReturn -export function useAxios(url: string, config?: AxiosRequestConfig, options?: UseAxiosOptions): StrictUseAxiosReturn & PromiseLike> -export function useAxios(url: string, instance?: AxiosInstance, options?: UseAxiosOptions): StrictUseAxiosReturn & PromiseLike> -export function useAxios(url: string, config: AxiosRequestConfig, instance: AxiosInstance, options?: UseAxiosOptions): StrictUseAxiosReturn & PromiseLike> -export function useAxios(config?: AxiosRequestConfig): EasyUseAxiosReturn & PromiseLike> -export function useAxios(instance?: AxiosInstance): EasyUseAxiosReturn & PromiseLike> -export function useAxios(config?: AxiosRequestConfig, instance?: AxiosInstance): EasyUseAxiosReturn & PromiseLike> +export function useAxios(url: string, config?: AxiosRequestConfig, options?: UseAxiosOptions): StrictUseAxiosReturn & PromiseLike> +export function useAxios(url: string, instance?: AxiosInstance, options?: UseAxiosOptions): StrictUseAxiosReturn & PromiseLike> +export function useAxios(url: string, config: AxiosRequestConfig, instance: AxiosInstance, options?: UseAxiosOptions): StrictUseAxiosReturn & PromiseLike> +export function useAxios(config?: AxiosRequestConfig): EasyUseAxiosReturn & PromiseLike> +export function useAxios(instance?: AxiosInstance): EasyUseAxiosReturn & PromiseLike> +export function useAxios(config?: AxiosRequestConfig, instance?: AxiosInstance): EasyUseAxiosReturn & PromiseLike> /** * Wrapper for axios. * * @see https://vueuse.org/useAxios */ -export function useAxios(...args: any[]): OverallUseAxiosReturn & PromiseLike> { +export function useAxios(...args: any[]): OverallUseAxiosReturn & PromiseLike> { const url: string | undefined = typeof args[0] === 'string' ? args[0] : undefined const argsPlaceholder = isString(url) ? 1 : 0 - let defaultConfig: AxiosRequestConfig = {} + let defaultConfig: AxiosRequestConfig = {} let instance: AxiosInstance = axios let options: UseAxiosOptions = { immediate: !!argsPlaceholder } @@ -160,15 +160,15 @@ export function useAxios(...args: any[]): OverallUseAxiosReturn & Pr isFinished.value = !loading } const waitUntilFinished = () => - new Promise>((resolve, reject) => { + new Promise>((resolve, reject) => { until(isFinished).toBe(true) // eslint-disable-next-line @typescript-eslint/no-use-before-define .then(() => resolve(result)) .catch(reject) }) - const then: PromiseLike>['then'] = (onFulfilled, onRejected) => + const then: PromiseLike>['then'] = (onFulfilled, onRejected) => waitUntilFinished().then(onFulfilled, onRejected) - const execute: OverallUseAxiosReturn['execute'] = (executeUrl: string | AxiosRequestConfig | undefined = url, config: AxiosRequestConfig = {}) => { + const execute: OverallUseAxiosReturn['execute'] = (executeUrl: string | AxiosRequestConfig | undefined = url, config: AxiosRequestConfig = {}) => { error.value = undefined const _url = typeof executeUrl === 'string' ? executeUrl @@ -186,7 +186,7 @@ export function useAxios(...args: any[]): OverallUseAxiosReturn & Pr return { then } } if (options.immediate && url) - (execute as StrictUseAxiosReturn['execute'])() + (execute as StrictUseAxiosReturn['execute'])() const result = { response, @@ -203,7 +203,7 @@ export function useAxios(...args: any[]): OverallUseAxiosReturn & Pr isCanceled: isAborted, abort, execute, - } as OverallUseAxiosReturn + } as OverallUseAxiosReturn return { ...result,