feat(useFetch): cancel previous request

packages/core/useFetch/index.test.ts

@@ -1,5 +1,5 @@
 import { until } from '@vueuse/shared'
-import { ref } from 'vue-demi'
+import { nextTick, ref } from 'vue-demi'
 import type { SpyInstance } from 'vitest'
 import { retry } from '../../.test'
 import { createFetch, useFetch } from '.'
@@ -658,4 +658,36 @@ describe('useFetch', () => {
     expect(data.value).toEqual(jsonMessage)
     expect(fetchSpy).toBeCalledTimes(1)
   })
+
+  test('should abort previous request', async () => {
+    const { onFetchResponse, execute } = useFetch('https://example.com', { immediate: false })
+
+    onFetchResponse(onFetchResponseSpy)
+
+    execute()
+    execute()
+    execute()
+    execute()
+
+    await retry(() => {
+      expect(onFetchResponseSpy).toBeCalledTimes(1)
+    })
+  })
+
+  it('should listen url ref change abort previous request', async () => {
+    const url = ref('https://example.com')
+    const { onFetchResponse } = useFetch(url, { refetch: true, immediate: false })
+
+    onFetchResponse(onFetchResponseSpy)
+
+    url.value = 'https://example.com?t=1'
+    await nextTick()
+    url.value = 'https://example.com?t=2'
+    await nextTick()
+    url.value = 'https://example.com?t=3'
+
+    await retry(() => {
+      expect(onFetchResponseSpy).toBeCalledTimes(1)
+    })
+  })
 })

packages/core/useFetch/index.ts

@@ -357,8 +357,10 @@ export function useFetch<T>(url: MaybeComputedRef<string>, ...args: any[]): UseF
   let timer: Stoppable | undefined
 
   const abort = () => {
-    if (supportsAbort && controller)
+    if (supportsAbort && controller) {
       controller.abort()
+      controller = undefined
+    }
   }
 
   const loading = (isLoading: boolean) => {
@@ -374,9 +376,9 @@ export function useFetch<T>(url: MaybeComputedRef<string>, ...args: any[]): UseF
     error.value = null
     statusCode.value = null
     aborted.value = false
-    controller = undefined
 
     if (supportsAbort) {
+      abort()
       controller = new AbortController()
       controller.signal.onabort = () => aborted.value = true
       fetchOptions = {