From 6b7c819a218d9e8c074a79dce57548c81719bbab Mon Sep 17 00:00:00 2001 From: azaleta <24407500@qq.com> Date: Thu, 1 Sep 2022 15:15:57 +0800 Subject: [PATCH 1/5] feature(useAxios): improve type --- packages/integrations/useAxios/index.test.ts | 25 ++++++++++++++++++++ packages/integrations/useAxios/index.ts | 4 ++-- 2 files changed, 27 insertions(+), 2 deletions(-) diff --git a/packages/integrations/useAxios/index.test.ts b/packages/integrations/useAxios/index.test.ts index 46749623873..9054f6d69a8 100644 --- a/packages/integrations/useAxios/index.test.ts +++ b/packages/integrations/useAxios/index.test.ts @@ -185,4 +185,29 @@ describe('useAxios', () => { expect(onRejected).toBeCalledTimes(0) }, onRejected) }) + + test('calling axios with config change(param/data etc.) only', async () => { + const { isLoading, then, execute } = useAxios('/comments', config, instance, options) + expect(isLoading.value).toBeFalsy() + const paramConfig: AxiosRequestConfig = { params: { postId: 1 } } + execute(paramConfig) + expect(isLoading.value).toBeTruthy() + const onRejected = vitest.fn() + + await then((result) => { + expect(result.data.value[0].postId).toBe(1) + expect(isLoading.value).toBeFalsy() + expect(onRejected).toBeCalledTimes(0) + }, onRejected) + + paramConfig.params = { postId: 2 } + execute(paramConfig) + expect(isLoading.value).toBeTruthy() + + await then((result) => { + expect(result.data.value[0].postId).toBe(2) + expect(isLoading.value).toBeFalsy() + expect(onRejected).toBeCalledTimes(0) + }, onRejected) + }) }) diff --git a/packages/integrations/useAxios/index.ts b/packages/integrations/useAxios/index.ts index 683709074b5..0115b8a63ce 100644 --- a/packages/integrations/useAxios/index.ts +++ b/packages/integrations/useAxios/index.ts @@ -78,7 +78,7 @@ export interface StrictUseAxiosReturn extends UseAxiosReturn { /** * Manually call the axios request */ - execute: (url?: string, config?: AxiosRequestConfig) => PromiseLike> + execute: (url?: string | AxiosRequestConfig, config?: AxiosRequestConfig) => PromiseLike> } export interface EasyUseAxiosReturn extends UseAxiosReturn { /** @@ -174,7 +174,7 @@ export function useAxios(...args: any[]): OverallUseAxiosReturn & Pr ? executeUrl : url ?? '' loading(true) - instance(_url, { ...defaultConfig, ...config, cancelToken: cancelToken.token }) + instance(_url, { ...defaultConfig, ...typeof executeUrl === 'object' ? executeUrl : config, cancelToken: cancelToken.token }) .then((r: any) => { response.value = r data.value = r.data From 949ffe1e6ee28a49b9a526ca3022f0e0626ed36f Mon Sep 17 00:00:00 2001 From: azaleta <24407500@qq.com> Date: Thu, 1 Sep 2022 15:34:46 +0800 Subject: [PATCH 2/5] Doc(useAxios): Add description of execute(config) --- packages/integrations/useAxios/index.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/integrations/useAxios/index.md b/packages/integrations/useAxios/index.md index a31665f5b95..9f57e43e474 100644 --- a/packages/integrations/useAxios/index.md +++ b/packages/integrations/useAxios/index.md @@ -62,6 +62,15 @@ const { execute } = useAxios(url1, {}, { immediate: false }) execute(url2) ``` +The `execute` function can accept `config` only. +```ts +import { useAxios } from '@vueuse/integrations/useAxios' + +const { execute } = useAxios(url1, { method: 'GET' }, { immediate: false }) +execute({ params: { key: 1 } }) +execute({ params: { key: 2 } }) +``` + The `execute` function resolves with a result of network request. ```ts import { useAxios } from '@vueuse/integrations/useAxios' From 6bdf26f11c43ceb596161b8b4b3eee8d547a5145 Mon Sep 17 00:00:00 2001 From: azaleta <24407500@qq.com> Date: Fri, 16 Sep 2022 13:44:22 +0900 Subject: [PATCH 3/5] feat(useAxios): improve type --- packages/integrations/useAxios/index.test.ts | 38 +++++++++++++++++++ packages/integrations/useAxios/index.ts | 40 ++++++++++---------- 2 files changed, 58 insertions(+), 20 deletions(-) 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..590f710d700 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, From c3deb5e036a89b80500898047a72c8da3383ff2f Mon Sep 17 00:00:00 2001 From: azaleta <24407500@qq.com> Date: Wed, 21 Sep 2022 01:30:45 +0900 Subject: [PATCH 4/5] Update packages/integrations/useAxios/index.ts Co-authored-by: vaakian X <30516060+vaakian@users.noreply.github.com> --- packages/integrations/useAxios/index.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/integrations/useAxios/index.ts b/packages/integrations/useAxios/index.ts index 590f710d700..640aec9d5ea 100644 --- a/packages/integrations/useAxios/index.ts +++ b/packages/integrations/useAxios/index.ts @@ -95,12 +95,12 @@ export interface UseAxiosOptions { } 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. From b5e1282ed384307141b4c7230fb8642e714c599a Mon Sep 17 00:00:00 2001 From: azaleta <24407500@qq.com> Date: Wed, 21 Sep 2022 01:30:53 +0900 Subject: [PATCH 5/5] Update packages/integrations/useAxios/index.ts Co-authored-by: vaakian X <30516060+vaakian@users.noreply.github.com> --- packages/integrations/useAxios/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/integrations/useAxios/index.ts b/packages/integrations/useAxios/index.ts index 640aec9d5ea..905e538ae74 100644 --- a/packages/integrations/useAxios/index.ts +++ b/packages/integrations/useAxios/index.ts @@ -107,7 +107,7 @@ export function useAxios(config?: AxiosRequestConfig, insta * * @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 = {}