feat: support pass ofetch to useFetch

README-zh.md

@@ -200,6 +200,26 @@ dep.value = 'bar'
 // request to => 'ok'
 ```
 
+## 重导出 ofetch
+
+`vfetcher` 重导出了 `ofetch` 的全部导出以方便直接使用ofetch：
+
+```ts
+import { ofetch } from 'vfetcher/ofetch'
+```
+
+### 在 `useFetch` 中使用已配置的 `ofetch`
+
+你可以直接将`ofetch`传入`useFetch`的选项内：
+
+```ts
+import { useFetch as $useFetch } from 'vfetcher'
+import { $fetch } from 'vfetcher/ofetch'
+
+export const $ = $fetch.create({ baseURL: 'http://localhost:3000' })
+export const useFetch = $useFetch.create({ ofetch: $ })
+```
+
 ## 返回值与选项
 
 ### 返回值
@@ -219,6 +239,7 @@ dep.value = 'bar'
 - `pollingInterval`: 可以是响应式值。传入一个`number`，单位为毫秒，用于指示轮询的间隔时间。默认不进行轮询。
 - `debounceInterval`: 可以是响应式值。传入一个`number`，单位为毫秒，用于指示防抖的延迟时间。默认不进行防抖。
 - `throttleInterval`: 可以是响应式值。传入一个`number`，单位为毫秒，用于指示节流的等待时间。默认不进行节流。
+- `ofetch`: ofetch 函数，用于共享配置项。默认为默认状态的 ofetch。
 
 对于默认情况下进行监听的参数：
 

README.md

@@ -200,6 +200,26 @@ dep.value = 'bar'
 // request to => 'ok'
 ```
 
+## Re-export ofetch
+
+`vfetcher` re-export all exports of `ofetch` so you can directly use ofetch：
+
+```ts
+import { ofetch } from 'vfetcher/ofetch'
+```
+
+### Use configured `ofetch` in `useFetch`
+
+You can directly pass `ofetch` in the option of `useFetch`:
+
+```ts
+import { useFetch as $useFetch } from 'vfetcher'
+import { $fetch } from 'vfetcher/ofetch'
+
+export const $ = $fetch.create({ baseURL: 'http://localhost:3000' })
+export const useFetch = $useFetch.create({ ofetch: $ })
+```
+
 ## Returns and options
 
 ### Returns
@@ -221,6 +241,7 @@ Here is the translation:
 - `pollingInterval`: Can be a reactive value. Pass a `number`, in milliseconds, to indicate the interval time for polling. By default, polling is not enabled.
 - `debounceInterval`: Can be a reactive value. Pass a `number`, in milliseconds, to indicate the debounce delay time. By default, debounce is not enabled.
 - `throttleInterval`: Can be a reactive value. Pass a `number`, in milliseconds, to indicate the throttle wait time. By default, throttling is not enabled.
+- `ofetch`: ofetch function, used to share options. Default is the built-in ofetch。
 
 For parameters that are watched by default:
 

src/core/ctx.ts

@@ -1,3 +1,4 @@
+import { $fetch } from 'ofetch'
 import type { ResponseType, UseFetchOptions } from './types'
 
 export function createContext<R extends ResponseType>(userOptions: UseFetchOptions<R>) {
@@ -15,6 +16,7 @@ function resolveOptions<R extends ResponseType>(options: UseFetchOptions<R>) {
     pollingInterval,
     debounceInterval,
     throttleInterval,
+    ofetch = $fetch,
 
     cache,
     credentials,
@@ -50,6 +52,7 @@ function resolveOptions<R extends ResponseType>(options: UseFetchOptions<R>) {
       pollingInterval,
       debounceInterval,
       throttleInterval,
+      ofetch,
     },
     optionsWatch,
     options$fetch: {

src/core/types.ts

@@ -1,4 +1,4 @@
-import type { FetchOptions, MappedResponseType } from 'ofetch'
+import type { $Fetch, FetchOptions, MappedResponseType } from 'ofetch'
 import type { ComputedRef, MaybeRefOrGetter, Ref, WatchSource } from 'vue'
 import type { Arrayable } from './utils/types'
 
@@ -38,6 +38,9 @@ export interface UseFetchOptions<R extends ResponseType> extends UseFetchReactiv
 
   /** Indicate the throttle wait time in millisecond */
   throttleInterval?: MaybeRefOrGetter<number>
+
+  /** Configure `ofetch` function used in `useFetch` */
+  ofetch?: $Fetch
 }
 
 export interface UseFetchReturns<R extends ResponseType, T> {

src/core/useFetch.ts

@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
 import { computed, reactive, ref, shallowRef, toValue, watch } from 'vue'
-import { $fetch, type MappedResponseType } from 'ofetch'
+import type { MappedResponseType } from 'ofetch'
 import { createContext } from './ctx'
 import { useTimeoutPoll } from './utils/useTimeoutPoll'
 import { useDebounceFn } from './utils/useDebounceFn'
@@ -36,7 +36,7 @@ export function createUseFetch(defaultOptions: UseFetchOptions<any> = {}) {
       status.value = 'pending'
       pending.value = true
 
-      data.value = await $fetch<T, R>(toValue(req), {
+      data.value = await ctx.optionsComposable.ofetch<T, R>(toValue(req), {
         ...ctx.options$fetch,
         ...Object.fromEntries(
           Object.entries(toValue(watchOptions)).map(([k, v]) => [k, toValue(v)]),