Use Axios · Vueuse Functions · antfu/skills · Skills Docs

Use Axios · Vueuse Functions · antfu/skills · Skills Docs

Property	Type	Description
`data`	`Ref<T>`	Response data
`response`	`Ref<AxiosResponse>`	Full axios response
`error`	`Ref<unknown>`	Error if request failed
`isFinished`	`Ref<boolean>`	Request has completed (success or error)
`isLoading`	`Ref<boolean>`	Request is in progress
`isAborted`	`Ref<boolean>`	Request was aborted
`abort` / `cancel`	`() => void`	Abort the current request
`execute`	`(url?, config?) => Promise`	Execute/re-execute the request

import { useAxios } from '@vueuse/integrations/useAxios'
import axios from 'axios'

const instance = axios.create({
  baseURL: '/api',
})

const { data, isFinished } = useAxios('/posts', instance)

import { useAxios } from '@vueuse/integrations/useAxios'
import axios from 'axios'

const instance = axios.create({
  baseURL: '/api',
})

const { data, isFinished } = useAxios('/posts', { method: 'POST' }, instance)

import { useAxios } from '@vueuse/integrations/useAxios'

const { execute } = useAxios(url1, { method: 'GET' }, { immediate: false })
execute({ params: { key: 1 } })
execute({ params: { key: 2 } })

const { data } = useAxios('/api/posts', config, instance, {
  // Execute immediately (default: true if url provided)
  immediate: true,
  // Use shallowRef for data (default: true)
  shallow: true,
  // Abort previous request on new execute (default: true)
  abortPrevious: true,
  // Reset data before executing (default: false)
  resetOnExecute: false,
  // Initial data value
  initialData: [],
  // Callbacks
  onSuccess: data => console.log('Success:', data),
  onError: error => console.error('Error:', error),
  onFinish: () => console.log('Finished'),
})

export interface UseAxiosReturn<
  T,
  R = AxiosResponse<T>,
  _D = any,
  O extends UseAxiosOptions = UseAxiosOptions<T>,
> {
  /**
   * Axios Response
   */
  response: ShallowRef<R | undefined>
  /**
   * Axios response data