feat(useAxios): support RequestConfig for execute (#2152)

vueuse · Sep 2, 2022 · 92630dd · 92630dd
1 parent 4db75ab
commit 92630dd
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 2 deletions.
diff --git 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'

diff --git 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
@@ -78,7 +78,7 @@ export interface StrictUseAxiosReturn<T> extends UseAxiosReturn<T> {
   /**
    * Manually call the axios request
    */
-  execute: (url?: string, config?: AxiosRequestConfig) => PromiseLike<StrictUseAxiosReturn<T>>
+  execute: (url?: string | AxiosRequestConfig, config?: AxiosRequestConfig) => PromiseLike<StrictUseAxiosReturn<T>>
 }
 export interface EasyUseAxiosReturn<T> extends UseAxiosReturn<T> {
   /**
@@ -174,7 +174,7 @@ export function useAxios<T = any>(...args: any[]): OverallUseAxiosReturn<T> & 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