📄 `useFetch`¶

📊 Analysis Summary¶

Metric	Count
🔧 Functions	15
📦 Imports	18
📊 Variables & Constants	2
⚡ Async/Await Patterns	5
🟢 Vue Composition API	4
📐 Interfaces	7
📑 Type Aliases	3

📚 Table of Contents¶

Imports
Variables & Constants
Async/Await Patterns
Vue Composition API
Functions
Interfaces
Type Aliases

🛠️ File Location:¶

📂 packages/core/useFetch/index.ts

📦 Imports¶

Name	Source
`EventHookOn`	`@vueuse/shared`
`Fn`	`@vueuse/shared`
`Stoppable`	`@vueuse/shared`
`ComputedRef`	`vue`
`MaybeRefOrGetter`	`vue`
`ShallowRef`	`vue`
`containsProp`	`@vueuse/shared`
`createEventHook`	`@vueuse/shared`
`toRef`	`@vueuse/shared`
`until`	`@vueuse/shared`
`useTimeoutFn`	`@vueuse/shared`
`computed`	`vue`
`isRef`	`vue`
`shallowReadonly`	`vue`
`shallowRef`	`vue`
`toValue`	`vue`
`watch`	`vue`
`defaultWindow`	`../_configurable`

Variables & Constants¶

Name	Type	Kind	Value	Exported
`payloadMapping`	`Record<string, string>`	const	`{ json: 'application/json', text: 'text/plain', }`	✗
`reAbsolute`	`RegExp`	const	`/^(?:[a-z][a-z\d+\-.]*:)?\/\//i`	✗

Async/Await Patterns¶

Type	Function	Await Expressions	Promise Chains
await-expression	`combineCallbacks`	callback(ctx), callback(ctx)	none
async-function	`execute`	options.beforeFetch(context), fetchResponse.clone()config.type, options.a...	Promise.resolve, fetch( context.url, { ...defaultFetchOptions, ...context.opt...
promise-chain	`setMethod`	none	waitUntilFinished().then
promise-chain	`waitUntilFinished`	none	new Promise(...), until(isFinished).toBe(true).then(() => resolve(shell)).cat...
promise-chain	`setType`	none	waitUntilFinished().then

Vue Composition API¶

Name	Type	Reactive Variables	Composables
`computed`	computed	none	none
`computed`	computed	none	none
`watch`	watch	none	none
`watch`	watch	none	none

Functions¶

`createFetch(config: CreateFetchOptions): { <T>(url: MaybeRefOrGetter<string>): UseFetchReturn<T> & P…`¶

Parameters:

config CreateFetchOptions

Returns: { <T>(url: MaybeRefOrGetter<string>): UseFetchReturn<T> & PromiseLike<UseFetchReturn<T>>; <T>(url: MaybeRefOrGetter<string>, useFetchOptions: UseFetchOptions): UseFetchReturn<T> & PromiseLike<UseFetchReturn<T>>; <T>(url: MaybeRefOrGetter<string>, options: RequestInit, useFetchOptions?: UseFetchOptions): UseFetchReturn<T> & PromiseLike<UseFetchReturn<T>>; }

Calls:

computed (from vue)
toValue (from vue)
isAbsoluteURL
joinPaths
isFetchOptions
combineCallbacks
headersToObject
useFetch

Internal Comments:

// Merge properties into a single object

Code

export function createFetch(config: CreateFetchOptions = {}) {
  const _combination = config.combination || 'chain' as Combination
  const _options = config.options || {}
  const _fetchOptions = config.fetchOptions || {}

  function useFactoryFetch(url: MaybeRefOrGetter<string>, ...args: any[]) {
    const computedUrl = computed(() => {
      const baseUrl = toValue(config.baseUrl)
      const targetUrl = toValue(url)

      return (baseUrl && !isAbsoluteURL(targetUrl))
        ? joinPaths(baseUrl, targetUrl)
        : targetUrl
    })

    let options = _options
    let fetchOptions = _fetchOptions

    // Merge properties into a single object
    if (args.length > 0) {
      if (isFetchOptions(args[0])) {
        options = {
          ...options,
          ...args[0],
          beforeFetch: combineCallbacks(_combination, _options.beforeFetch, args[0].beforeFetch),
          afterFetch: combineCallbacks(_combination, _options.afterFetch, args[0].afterFetch),
          onFetchError: combineCallbacks(_combination, _options.onFetchError, args[0].onFetchError),
        }
      }
      else {
        fetchOptions = {
          ...fetchOptions,
          ...args[0],
          headers: {
            ...(headersToObject(fetchOptions.headers) || {}),
            ...(headersToObject(args[0].headers) || {}),
          },
        }
      }
    }

    if (args.length > 1 && isFetchOptions(args[1])) {
      options = {
        ...options,
        ...args[1],
        beforeFetch: combineCallbacks(_combination, _options.beforeFetch, args[1].beforeFetch),
        afterFetch: combineCallbacks(_combination, _options.afterFetch, args[1].afterFetch),
        onFetchError: combineCallbacks(_combination, _options.onFetchError, args[1].onFetchError),
      }
    }

    return useFetch(computedUrl, fetchOptions, options)
  }

  return useFactoryFetch as typeof useFetch
}

`useFetch(url: MaybeRefOrGetter<string>): UseFetchReturn<T> & PromiseLike<UseFetchReturn<T>>`¶

Parameters:

url MaybeRefOrGetter<string>

Returns: UseFetchReturn<T> & PromiseLike<UseFetchReturn<T>>

Code

export function useFetch<T>(url: MaybeRefOrGetter<string>): UseFetchReturn<T> & PromiseLike<UseFetchReturn<T>>

`isFetchOptions(obj: object): obj is UseFetchOptions`¶

!!!IMPORTANT!!!

If you update the UseFetchOptions interface, be sure to update this object to include the new options

Raw JSDoc

/**
 * !!!IMPORTANT!!!
 *
 * If you update the UseFetchOptions interface, be sure to update this object
 * to include the new options
 */

Calls:

containsProp (from @vueuse/shared)

Code

function isFetchOptions(obj: object): obj is UseFetchOptions {
  return obj && containsProp(obj, 'immediate', 'refetch', 'initialData', 'timeout', 'beforeFetch', 'afterFetch', 'onFetchError', 'fetch', 'updateDataOnError')
}

`isAbsoluteURL(url: string): boolean`¶

Parameters:

url string

Returns: boolean

Calls:

reAbsolute.test

Code

function isAbsoluteURL(url: string) {
  return reAbsolute.test(url)
}

`headersToObject(headers: HeadersInit | undefined): HeadersInit`¶

Parameters:

headers HeadersInit | undefined

Returns: HeadersInit

Calls:

Object.fromEntries
headers.entries

Code

function headersToObject(headers: HeadersInit | undefined) {
  if (typeof Headers !== 'undefined' && headers instanceof Headers)
    return Object.fromEntries(headers.entries())
  return headers
}

`combineCallbacks(combination: Combination, callbacks: (((ctx: T) => void | Partial<T> | Promi…): (ctx: T) => Promise<any>`¶

Parameters:

combination Combination
callbacks (((ctx: T) => void | Partial<T> | Promise<void | Partial<T>>) | undefined)[]

Returns: (ctx: T) => Promise<any>

Calls:

callback

Internal Comments:

// use last callback
// chaining and combine result

Code

function combineCallbacks<T = any>(combination: Combination, ...callbacks: (((ctx: T) => void | Partial<T> | Promise<void | Partial<T>>) | undefined)[]) {
  if (combination === 'overwrite') {
    // use last callback
    return async (ctx: T) => {
      let callback
      for (let i = callbacks.length - 1; i >= 0; i--) {
        if (callbacks[i] != null) {
          callback = callbacks[i]
          break
        }
      }
      if (callback)
        return { ...ctx, ...(await callback(ctx)) }

      return ctx
    }
  }
  else {
    // chaining and combine result
    return async (ctx: T) => {
      for (const callback of callbacks) {
        if (callback)
          ctx = { ...ctx, ...(await callback(ctx)) }
      }

      return ctx
    }
  }
}

`joinPaths(start: string, end: string): string`¶

Parameters:

start string
end string

Returns: string

Calls:

start.endsWith
end.startsWith
start.slice

Code

function joinPaths(start: string, end: string): string {
  if (!start.endsWith('/') && !end.startsWith('/')) {
    return `${start}/${end}`
  }

  if (start.endsWith('/') && end.startsWith('/')) {
    return `${start.slice(0, -1)}${end}`
  }

  return `${start}${end}`
}

Internal helpers¶

Declared inside another function in this file.

`useFactoryFetch(url: MaybeRefOrGetter<string>, args: any[]): UseFetchReturn<unknown> & PromiseLike<UseFetchReturn<unknow…`¶

Parameters:

url MaybeRefOrGetter<string>
args any[]

Returns: UseFetchReturn<unknown> & PromiseLike<UseFetchReturn<unknown>>

Calls:

computed (from vue)
toValue (from vue)
isAbsoluteURL
joinPaths
isFetchOptions
combineCallbacks
headersToObject
useFetch

Internal Comments:

// Merge properties into a single object

Code

function useFactoryFetch(url: MaybeRefOrGetter<string>, ...args: any[]) {
    const computedUrl = computed(() => {
      const baseUrl = toValue(config.baseUrl)
      const targetUrl = toValue(url)

      return (baseUrl && !isAbsoluteURL(targetUrl))
        ? joinPaths(baseUrl, targetUrl)
        : targetUrl
    })

    let options = _options
    let fetchOptions = _fetchOptions

    // Merge properties into a single object
    if (args.length > 0) {
      if (isFetchOptions(args[0])) {
        options = {
          ...options,
          ...args[0],
          beforeFetch: combineCallbacks(_combination, _options.beforeFetch, args[0].beforeFetch),
          afterFetch: combineCallbacks(_combination, _options.afterFetch, args[0].afterFetch),
          onFetchError: combineCallbacks(_combination, _options.onFetchError, args[0].onFetchError),
        }
      }
      else {
        fetchOptions = {
          ...fetchOptions,
          ...args[0],
          headers: {
            ...(headersToObject(fetchOptions.headers) || {}),
            ...(headersToObject(args[0].headers) || {}),
          },
        }
      }
    }

    if (args.length > 1 && isFetchOptions(args[1])) {
      options = {
        ...options,
        ...args[1],
        beforeFetch: combineCallbacks(_combination, _options.beforeFetch, args[1].beforeFetch),
        afterFetch: combineCallbacks(_combination, _options.afterFetch, args[1].afterFetch),
        onFetchError: combineCallbacks(_combination, _options.onFetchError, args[1].onFetchError),
      }
    }

    return useFetch(computedUrl, fetchOptions, options)
  }

`abort(reason: any): void`¶

Parameters:

reason any

Returns: void

Calls:

controller?.abort

Code

(reason?: any) => {
    if (supportsAbort) {
      controller?.abort(reason)
      controller = new AbortController()
      controller.signal.onabort = () => aborted.value = true
      fetchOptions = {
        ...fetchOptions,
        signal: controller.signal,
      }
    }
  }

`loading(isLoading: boolean): void`¶

Parameters:

isLoading boolean

Returns: void

Code

(isLoading: boolean) => {
    isFetching.value = isLoading
    isFinished.value = !isLoading
  }

`execute(throwOnFailed: boolean): Promise<any>`¶

Parameters:

throwOnFailed boolean

Returns: Promise<any>

Calls:

abort
loading
toValue (from vue)
headersToObject
Object.getPrototypeOf
Array.isArray
JSON.stringify
Object.assign
options.beforeFetch
Promise.resolve
timer.start

`fetch( context.url, { ...defaultFetchOptions, ...context.options, headers: { ...headersToObject(defaultFetchOptions.headers), ...headersToObject(context.options?.headers), }, }, ) .then(async (fetchResponse) => { if (currentExecuteCounter === executeCounter) { response.value = fetchResponse statusCode.value = fetchResponse.status }

responseData = await fetchResponse.clone()[config.type]()

// see: https://www.tjvantoll.com/2015/09/13/fetch-and-errors/
if (!fetchResponse.ok) {
  if (currentExecuteCounter === executeCounter)
    data.value = initialData || null
  throw new Error(fetchResponse.statusText)
}

if (options.afterFetch) {
  ({ data: responseData } = await options.afterFetch({
    data: responseData,
    response: fetchResponse,
    context,
    execute,
  }))
}
if (currentExecuteCounter === executeCounter)
  data.value = responseData

responseEvent.trigger(fetchResponse)
return fetchResponse

}) .catch(async (fetchError) => { let errorData = fetchError.message || fetchError.name

if (options.onFetchError) {
  ({ error: errorData, data: responseData } = await options.onFetchError({
    data: responseData,
    error: fetchError,
    response: response.value,
    context,
    execute,
  }))
}

if (currentExecuteCounter === executeCounter) {
  error.value = errorData
  if (options.updateDataOnError)
    data.value = responseData
}

errorEvent.trigger(fetchError)
if (throwOnFailed)
  throw fetchError
return null

}) .finally-timer.stop-finallyEvent.trigger`

Internal Comments:

// Set the payload to json type only if it's not provided and a literal object or array is provided and the object is not `formData` (x2)
// The only case we can deduce the content type and `fetch` can't (x2)
// see: https://www.tjvantoll.com/2015/09/13/fetch-and-errors/

Code

async (throwOnFailed = false) => {
    abort()

    loading(true)
    error.value = null
    statusCode.value = null
    aborted.value = false

    executeCounter += 1
    const currentExecuteCounter = executeCounter

    const defaultFetchOptions: RequestInit = {
      method: config.method,
      headers: {},
    }

    const payload = toValue(config.payload)
    if (payload) {
      const headers = headersToObject(defaultFetchOptions.headers) as Record<string, string>
      // Set the payload to json type only if it's not provided and a literal object or array is provided and the object is not `formData`
      // The only case we can deduce the content type and `fetch` can't
      const proto = Object.getPrototypeOf(payload)
      if (!config.payloadType && payload && (proto === Object.prototype || Array.isArray(proto)) && !(payload instanceof FormData))
        config.payloadType = 'json'

      if (config.payloadType)
        headers['Content-Type'] = payloadMapping[config.payloadType] ?? config.payloadType

      defaultFetchOptions.body = config.payloadType === 'json'
        ? JSON.stringify(payload)
        : payload as BodyInit
    }

    let isCanceled = false
    const context: BeforeFetchContext = {
      url: toValue(url),
      options: {
        ...defaultFetchOptions,
        ...fetchOptions,
      },
      cancel: () => { isCanceled = true },
    }

    if (options.beforeFetch)
      Object.assign(context, await options.beforeFetch(context))

    if (isCanceled || !fetch) {
      loading(false)
      return Promise.resolve(null)
    }

    let responseData: any = null

    if (timer)
      timer.start()

    return fetch(
      context.url,
      {
        ...defaultFetchOptions,
        ...context.options,
        headers: {
          ...headersToObject(defaultFetchOptions.headers),
          ...headersToObject(context.options?.headers),
        },
      },
    )
      .then(async (fetchResponse) => {
        if (currentExecuteCounter === executeCounter) {
          response.value = fetchResponse
          statusCode.value = fetchResponse.status
        }

        responseData = await fetchResponse.clone()[config.type]()

        // see: https://www.tjvantoll.com/2015/09/13/fetch-and-errors/
        if (!fetchResponse.ok) {
          if (currentExecuteCounter === executeCounter)
            data.value = initialData || null
          throw new Error(fetchResponse.statusText)
        }

        if (options.afterFetch) {
          ({ data: responseData } = await options.afterFetch({
            data: responseData,
            response: fetchResponse,
            context,
            execute,
          }))
        }
        if (currentExecuteCounter === executeCounter)
          data.value = responseData

        responseEvent.trigger(fetchResponse)
        return fetchResponse
      })
      .catch(async (fetchError) => {
        let errorData = fetchError.message || fetchError.name

        if (options.onFetchError) {
          ({ error: errorData, data: responseData } = await options.onFetchError({
            data: responseData,
            error: fetchError,
            response: response.value,
            context,
            execute,
          }))
        }

        if (currentExecuteCounter === executeCounter) {
          error.value = errorData
          if (options.updateDataOnError)
            data.value = responseData
        }

        errorEvent.trigger(fetchError)
        if (throwOnFailed)
          throw fetchError
        return null
      })
      .finally(() => {
        if (currentExecuteCounter === executeCounter)
          loading(false)
        if (timer)
          timer.stop()
        finallyEvent.trigger(null)
      })
  }

`cancel(): void`¶

Returns: void

Code

() => { isCanceled = true }

`setMethod(method: HttpMethod): (payload?: unknown, payloadType?: string) => any`¶

Parameters:

method HttpMethod

Returns: (payload?: unknown, payloadType?: string) => any

Calls:

isRef (from vue)
watch (from vue)
toRef (from @vueuse/shared)
execute
waitUntilFinished() .then

Internal Comments:

// watch for payload changes

Code

function setMethod(method: HttpMethod) {
    return (payload?: unknown, payloadType?: string) => {
      if (!isFetching.value) {
        config.method = method
        config.payload = payload
        config.payloadType = payloadType

        // watch for payload changes
        if (isRef(config.payload)) {
          watch(
            [
              refetch,
              toRef(config.payload),
            ],
            ([refetch]) => refetch && execute(),
            { deep: true },
          )
        }

        return {
          ...shell,
          then(onFulfilled: any, onRejected: any) {
            return waitUntilFinished()
              .then(onFulfilled, onRejected)
          },
        } as any
      }
      return undefined
    }
  }

`waitUntilFinished(): Promise<UseFetchReturn<T>>`¶

Returns: Promise<UseFetchReturn<T>>

Calls:

until(isFinished).toBe(true).then(() => resolve(shell)).catch

Code

function waitUntilFinished() {
    return new Promise<UseFetchReturn<T>>((resolve, reject) => {
      until(isFinished).toBe(true).then(() => resolve(shell)).catch(reject)
    })
  }

`setType(type: DataType): () => any`¶

Parameters:

type DataType

Returns: () => any

Calls:

waitUntilFinished() .then

Code

function setType(type: DataType) {
    return () => {
      if (!isFetching.value) {
        config.type = type
        return {
          ...shell,
          then(onFulfilled: any, onRejected: any) {
            return waitUntilFinished()
              .then(onFulfilled, onRejected)
          },
        } as any
      }
      return undefined
    }
  }

Interfaces¶

`UseFetchReturn<T>`¶

Interface Code

export interface UseFetchReturn<T> {
  /**
   * Indicates if the fetch request has finished
   */
  isFinished: Readonly<ShallowRef<boolean>>

  /**
   * The statusCode of the HTTP fetch response
   */
  statusCode: ShallowRef<number | null>

  /**
   * The raw response of the fetch response
   */
  response: ShallowRef<Response | null>

  /**
   * Any fetch errors that may have occurred
   */
  error: ShallowRef<any>

  /**
   * The fetch response body on success, may either be JSON or text
   */
  data: ShallowRef<T | null>

  /**
   * Indicates if the request is currently being fetched.
   */
  isFetching: Readonly<ShallowRef<boolean>>

  /**
   * Indicates if the fetch request is able to be aborted
   */
  canAbort: ComputedRef<boolean>

  /**
   * Indicates if the fetch request was aborted
   */
  aborted: ShallowRef<boolean>

  /**
   * Abort the fetch request
   */
  abort: (reason?: any) => void

  /**
   * Manually call the fetch
   * (default not throwing error)
   */
  execute: (throwOnFailed?: boolean) => Promise<any>

  /**
   * Fires after the fetch request has finished
   */
  onFetchResponse: EventHookOn<Response>

  /**
   * Fires after a fetch request error
   */
  onFetchError: EventHookOn

  /**
   * Fires after a fetch has completed
   */
  onFetchFinally: EventHookOn

  // methods
  get: () => UseFetchReturn<T> & PromiseLike<UseFetchReturn<T>>
  post: (payload?: MaybeRefOrGetter<unknown>, type?: string) => UseFetchReturn<T> & PromiseLike<UseFetchReturn<T>>
  put: (payload?: MaybeRefOrGetter<unknown>, type?: string) => UseFetchReturn<T> & PromiseLike<UseFetchReturn<T>>
  delete: (payload?: MaybeRefOrGetter<unknown>, type?: string) => UseFetchReturn<T> & PromiseLike<UseFetchReturn<T>>
  patch: (payload?: MaybeRefOrGetter<unknown>, type?: string) => UseFetchReturn<T> & PromiseLike<UseFetchReturn<T>>
  head: (payload?: MaybeRefOrGetter<unknown>, type?: string) => UseFetchReturn<T> & PromiseLike<UseFetchReturn<T>>
  options: (payload?: MaybeRefOrGetter<unknown>, type?: string) => UseFetchReturn<T> & PromiseLike<UseFetchReturn<T>>

  // type
  json: <JSON = any>() => UseFetchReturn<JSON> & PromiseLike<UseFetchReturn<JSON>>
  text: () => UseFetchReturn<string> & PromiseLike<UseFetchReturn<string>>
  blob: () => UseFetchReturn<Blob> & PromiseLike<UseFetchReturn<Blob>>
  arrayBuffer: () => UseFetchReturn<ArrayBuffer> & PromiseLike<UseFetchReturn<ArrayBuffer>>
  formData: () => UseFetchReturn<FormData> & PromiseLike<UseFetchReturn<FormData>>
}

Properties¶

Name	Type	Optional	Description
`isFinished`	`Readonly<ShallowRef<boolean>>`	✗	not shown
`statusCode`	`ShallowRef<number \\| null>`	✗	not shown
`response`	`ShallowRef<Response \\| null>`	✗	not shown
`error`	`ShallowRef<any>`	✗	not shown
`data`	`ShallowRef<T \\| null>`	✗	not shown
`isFetching`	`Readonly<ShallowRef<boolean>>`	✗	not shown
`canAbort`	`ComputedRef<boolean>`	✗	not shown
`aborted`	`ShallowRef<boolean>`	✗	not shown
`abort`	`(reason?: any) => void`	✗	not shown
`execute`	`(throwOnFailed?: boolean) => Promise<any>`	✗	not shown
`onFetchResponse`	`EventHookOn<Response>`	✗	not shown
`onFetchError`	`EventHookOn`	✗	not shown
`onFetchFinally`	`EventHookOn`	✗	not shown
`get`	`() => UseFetchReturn<T> & PromiseLike<UseFetchReturn<T>>`	✗	not shown
`post`	`(payload?: MaybeRefOrGetter<unknown>, type?: string) => UseFetchReturn<T> & P...`	✗	not shown
`put`	`(payload?: MaybeRefOrGetter<unknown>, type?: string) => UseFetchReturn<T> & P...`	✗	not shown
`delete`	`(payload?: MaybeRefOrGetter<unknown>, type?: string) => UseFetchReturn<T> & P...`	✗	not shown
`patch`	`(payload?: MaybeRefOrGetter<unknown>, type?: string) => UseFetchReturn<T> & P...`	✗	not shown
`head`	`(payload?: MaybeRefOrGetter<unknown>, type?: string) => UseFetchReturn<T> & P...`	✗	not shown
`options`	`(payload?: MaybeRefOrGetter<unknown>, type?: string) => UseFetchReturn<T> & P...`	✗	not shown
`json`	`<JSON = any>() => UseFetchReturn<JSON> & PromiseLike<UseFetchReturn<JSON>>`	✗	not shown
`text`	`() => UseFetchReturn<string> & PromiseLike<UseFetchReturn<string>>`	✗	not shown
`blob`	`() => UseFetchReturn<Blob> & PromiseLike<UseFetchReturn<Blob>>`	✗	not shown
`arrayBuffer`	`() => UseFetchReturn<ArrayBuffer> & PromiseLike<UseFetchReturn<ArrayBuffer>>`	✗	not shown
`formData`	`() => UseFetchReturn<FormData> & PromiseLike<UseFetchReturn<FormData>>`	✗	not shown

`BeforeFetchContext`¶

Interface Code

export interface BeforeFetchContext {
  /**
   * The computed url of the current request
   */
  url: string

  /**
   * The request options of the current request
   */
  options: RequestInit

  /**
   * Cancels the current request
   */
  cancel: Fn
}

Properties¶

Name	Type	Optional	Description
`url`	`string`	✗	not shown
`options`	`RequestInit`	✗	not shown
`cancel`	`Fn`	✗	not shown

`AfterFetchContext<T = any>`¶

Interface Code

export interface AfterFetchContext<T = any> {
  response: Response

  data: T | null

  context: BeforeFetchContext

  execute: (throwOnFailed?: boolean) => Promise<any>
}

Properties¶

Name	Type	Optional	Description
`response`	`Response`	✗	not shown
`data`	`T \\| null`	✗	not shown
`context`	`BeforeFetchContext`	✗	not shown
`execute`	`(throwOnFailed?: boolean) => Promise<any>`	✗	not shown

`OnFetchErrorContext<T = any, E = any>`¶

Interface Code

export interface OnFetchErrorContext<T = any, E = any> {
  error: E

  data: T | null

  response: Response | null

  context: BeforeFetchContext

  execute: (throwOnFailed?: boolean) => Promise<any>
}

Properties¶

Name	Type	Optional	Description
`error`	`E`	✗	not shown
`data`	`T \\| null`	✗	not shown
`response`	`Response \\| null`	✗	not shown
`context`	`BeforeFetchContext`	✗	not shown
`execute`	`(throwOnFailed?: boolean) => Promise<any>`	✗	not shown

`UseFetchOptions`¶

Interface Code

export interface UseFetchOptions {
  /**
   * Fetch function
   */
  fetch?: typeof window.fetch

  /**
   * Will automatically run fetch when `useFetch` is used
   *
   * @default true
   */
  immediate?: boolean

  /**
   * Will automatically refetch when:
   * - the URL is changed if the URL is a ref
   * - the payload is changed if the payload is a ref
   *
   * @default false
   */
  refetch?: MaybeRefOrGetter<boolean>

  /**
   * Initial data before the request finished
   *
   * @default null
   */
  initialData?: any

  /**
   * Timeout for abort request after number of millisecond
   * `0` means use browser default
   *
   * @default 0
   */
  timeout?: number

  /**
   * Allow update the `data` ref when fetch error whenever provided, or mutated in the `onFetchError` callback
   *
   * @default false
   */
  updateDataOnError?: boolean

  /**
   * Will run immediately before the fetch request is dispatched
   */
  beforeFetch?: (ctx: BeforeFetchContext) => Promise<Partial<BeforeFetchContext> | void> | Partial<BeforeFetchContext> | void

  /**
   * Will run immediately after the fetch request is returned.
   * Runs after any 2xx response
   */
  afterFetch?: (ctx: AfterFetchContext) => Promise<Partial<AfterFetchContext>> | Partial<AfterFetchContext>

  /**
   * Will run immediately after the fetch request is returned.
   * Runs after any 4xx and 5xx response
   */
  onFetchError?: (ctx: OnFetchErrorContext) => Promise<Partial<OnFetchErrorContext>> | Partial<OnFetchErrorContext>
}

Properties¶

Name	Type	Optional	Description
`fetch`	`typeof window.fetch`	✓	not shown
`immediate`	`boolean`	✓	not shown
`refetch`	`MaybeRefOrGetter<boolean>`	✓	not shown
`initialData`	`any`	✓	not shown
`timeout`	`number`	✓	not shown
`updateDataOnError`	`boolean`	✓	not shown
`beforeFetch`	`(ctx: BeforeFetchContext) => Promise<Partial<BeforeFetchContext> \\| void> \\| ...`	✓	not shown
`afterFetch`	`(ctx: AfterFetchContext) => Promise<Partial<AfterFetchContext>> \\| Partial<Af...`	✓	not shown
`onFetchError`	`(ctx: OnFetchErrorContext) => Promise<Partial<OnFetchErrorContext>> \\| Partia...`	✓	not shown

`CreateFetchOptions`¶

Interface Code

export interface CreateFetchOptions {
  /**
   * The base URL that will be prefixed to all urls unless urls are absolute
   */
  baseUrl?: MaybeRefOrGetter<string>

  /**
   * Determine the inherit behavior for beforeFetch, afterFetch, onFetchError
   * @default 'chain'
   */
  combination?: Combination

  /**
   * Default Options for the useFetch function
   */
  options?: UseFetchOptions

  /**
   * Options for the fetch request
   */
  fetchOptions?: RequestInit
}

Properties¶

Name	Type	Optional	Description
`baseUrl`	`MaybeRefOrGetter<string>`	✓	not shown
`combination`	`Combination`	✓	not shown
`options`	`UseFetchOptions`	✓	not shown
`fetchOptions`	`RequestInit`	✓	not shown

`InternalConfig`¶

Interface Code

interface InternalConfig {
    method: HttpMethod
    type: DataType
    payload: unknown
    payloadType?: string
  }

Properties¶

Name	Type	Optional	Description
`method`	`HttpMethod`	✗	not shown
`type`	`DataType`	✗	not shown
`payload`	`unknown`	✗	not shown
`payloadType`	`string`	✓	not shown

Type Aliases¶

`DataType`¶

type DataType = 'text' | 'json' | 'blob' | 'arrayBuffer' | 'formData';

`HttpMethod`¶

type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'OPTIONS';

`Combination`¶

type Combination = 'overwrite' | 'chain';

Generated by Syntax Scribe

📄 useFetch¶

📊 Analysis Summary¶

📚 Table of Contents¶

🛠️ File Location:¶

📦 Imports¶

Variables & Constants¶

Async/Await Patterns¶

Vue Composition API¶

Functions¶

createFetch(config: CreateFetchOptions): { <T>(url: MaybeRefOrGetter<string>): UseFetchReturn<T> & P…¶

useFetch(url: MaybeRefOrGetter<string>): UseFetchReturn<T> & PromiseLike<UseFetchReturn<T>>¶

isFetchOptions(obj: object): obj is UseFetchOptions¶

isAbsoluteURL(url: string): boolean¶

headersToObject(headers: HeadersInit | undefined): HeadersInit¶

combineCallbacks(combination: Combination, callbacks: (((ctx: T) => void | Partial<T> | Promi…): (ctx: T) => Promise<any>¶

joinPaths(start: string, end: string): string¶

Internal helpers¶

useFactoryFetch(url: MaybeRefOrGetter<string>, args: any[]): UseFetchReturn<unknown> & PromiseLike<UseFetchReturn<unknow…¶

abort(reason: any): void¶

loading(isLoading: boolean): void¶

execute(throwOnFailed: boolean): Promise<any>¶

cancel(): void¶

setMethod(method: HttpMethod): (payload?: unknown, payloadType?: string) => any¶

waitUntilFinished(): Promise<UseFetchReturn<T>>¶

setType(type: DataType): () => any¶

Interfaces¶

UseFetchReturn<T>¶

Properties¶

BeforeFetchContext¶

Properties¶

AfterFetchContext<T = any>¶

Properties¶

OnFetchErrorContext<T = any, E = any>¶

Properties¶

UseFetchOptions¶

Properties¶

CreateFetchOptions¶

Properties¶

InternalConfig¶

Properties¶

Type Aliases¶

DataType¶

HttpMethod¶

Combination¶

📄 `useFetch`¶

`createFetch(config: CreateFetchOptions): { <T>(url: MaybeRefOrGetter<string>): UseFetchReturn<T> & P…`¶

`useFetch(url: MaybeRefOrGetter<string>): UseFetchReturn<T> & PromiseLike<UseFetchReturn<T>>`¶

`isFetchOptions(obj: object): obj is UseFetchOptions`¶

`isAbsoluteURL(url: string): boolean`¶

`headersToObject(headers: HeadersInit | undefined): HeadersInit`¶

`combineCallbacks(combination: Combination, callbacks: (((ctx: T) => void | Partial<T> | Promi…): (ctx: T) => Promise<any>`¶

`joinPaths(start: string, end: string): string`¶

`useFactoryFetch(url: MaybeRefOrGetter<string>, args: any[]): UseFetchReturn<unknown> & PromiseLike<UseFetchReturn<unknow…`¶

`abort(reason: any): void`¶

`loading(isLoading: boolean): void`¶

`execute(throwOnFailed: boolean): Promise<any>`¶

`cancel(): void`¶

`setMethod(method: HttpMethod): (payload?: unknown, payloadType?: string) => any`¶

`waitUntilFinished(): Promise<UseFetchReturn<T>>`¶

`setType(type: DataType): () => any`¶

`UseFetchReturn<T>`¶

`BeforeFetchContext`¶

`AfterFetchContext<T = any>`¶

`OnFetchErrorContext<T = any, E = any>`¶

`UseFetchOptions`¶

`CreateFetchOptions`¶

`InternalConfig`¶

`DataType`¶

`HttpMethod`¶

`Combination`¶