useAxios

Wrapper for axios.

Demo

Install

npm i axios

npm i axios

Usage

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

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

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

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

or use an instance of axios

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

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

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

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

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

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

use an instance of axios with config options

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

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

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

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

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

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

When you don't pass the url. The default value is {immediate: false}

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

const { execute } = useAxios()
execute(url)

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

const { execute } = useAxios()
execute(url)

The execute function url here is optional, and url2 will replace the url1.

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

const { execute } = useAxios(url1, {}, { immediate: false })
execute(url2)

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

const { execute } = useAxios(url1, {}, { immediate: false })
execute(url2)

The execute function resolves with a result of network request.

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

const { execute } = useAxios()
const result = await execute(url)

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

const { execute } = useAxios()
const result = await execute(url)

use an instance of axios with immediate options

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

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

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

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

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

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

Type Declarations

Show Type Declarations

export interface UseAxiosReturn<T> {
  /**
   * Axios Response
   */
  response: ShallowRef<AxiosResponse<T> | undefined>
  /**
   * Axios response data
   */
  data: Ref<T | undefined>
  /**
   * Indicates if the request has finished
   */
  isFinished: Ref<boolean>
  /**
   * Indicates if the request is currently loading
   */
  isLoading: Ref<boolean>
  /**
   * Indicates if the request was canceled
   */
  isAborted: Ref<boolean>
  /**
   * Any errors that may have occurred
   */
  error: ShallowRef<AxiosError<T> | undefined>
  /**
   * Aborts the current request
   */
  abort: (message?: string | undefined) => void
  /**
   * isFinished alias
   * @deprecated use `isFinished` instead
   */
  finished: Ref<boolean>
  /**
   * isLoading alias
   * @deprecated use `isLoading` instead
   */
  loading: Ref<boolean>
  /**
   * isAborted alias
   * @deprecated use `isAborted` instead
   */
  aborted: Ref<boolean>
  /**
   * abort alias
   */
  cancel: (message?: string | undefined) => void
  /**
   * isAborted alias
   * @deprecated use `isCanceled` instead
   */
  canceled: Ref<boolean>
  /**
   * isAborted alias
   */
  isCanceled: Ref<boolean>
}
export interface StrictUseAxiosReturn<T> extends UseAxiosReturn<T> {
  /**
   * Manually call the axios request
   */
  execute: (
    url?: string,
    config?: AxiosRequestConfig
  ) => PromiseLike<StrictUseAxiosReturn<T>>
}
export interface EasyUseAxiosReturn<T> extends UseAxiosReturn<T> {
  /**
   * Manually call the axios request
   */
  execute: (
    url: string,
    config?: AxiosRequestConfig
  ) => PromiseLike<EasyUseAxiosReturn<T>>
}
export interface UseAxiosOptions {
  /**
   * Will automatically run axios request when `useAxios` is used
   *
   */
  immediate?: boolean
}
export declare function useAxios<T = any>(
  url: string,
  config?: AxiosRequestConfig,
  options?: UseAxiosOptions
): StrictUseAxiosReturn<T> & PromiseLike<StrictUseAxiosReturn<T>>
export declare function useAxios<T = any>(
  url: string,
  instance?: AxiosInstance,
  options?: UseAxiosOptions
): StrictUseAxiosReturn<T> & PromiseLike<StrictUseAxiosReturn<T>>
export declare function useAxios<T = any>(
  url: string,
  config: AxiosRequestConfig,
  instance: AxiosInstance,
  options?: UseAxiosOptions
): StrictUseAxiosReturn<T> & PromiseLike<StrictUseAxiosReturn<T>>
export declare function useAxios<T = any>(
  config?: AxiosRequestConfig
): EasyUseAxiosReturn<T> & PromiseLike<EasyUseAxiosReturn<T>>
export declare function useAxios<T = any>(
  instance?: AxiosInstance
): EasyUseAxiosReturn<T> & PromiseLike<EasyUseAxiosReturn<T>>
export declare function useAxios<T = any>(
  config?: AxiosRequestConfig,
  instance?: AxiosInstance
): EasyUseAxiosReturn<T> & PromiseLike<EasyUseAxiosReturn<T>>

export interface UseAxiosReturn<T> {
  /**
   * Axios Response
   */
  response: ShallowRef<AxiosResponse<T> | undefined>
  /**
   * Axios response data
   */
  data: Ref<T | undefined>
  /**
   * Indicates if the request has finished
   */
  isFinished: Ref<boolean>
  /**
   * Indicates if the request is currently loading
   */
  isLoading: Ref<boolean>
  /**
   * Indicates if the request was canceled
   */
  isAborted: Ref<boolean>
  /**
   * Any errors that may have occurred
   */
  error: ShallowRef<AxiosError<T> | undefined>
  /**
   * Aborts the current request
   */
  abort: (message?: string | undefined) => void
  /**
   * isFinished alias
   * @deprecated use `isFinished` instead
   */
  finished: Ref<boolean>
  /**
   * isLoading alias
   * @deprecated use `isLoading` instead
   */
  loading: Ref<boolean>
  /**
   * isAborted alias
   * @deprecated use `isAborted` instead
   */
  aborted: Ref<boolean>
  /**
   * abort alias
   */
  cancel: (message?: string | undefined) => void
  /**
   * isAborted alias
   * @deprecated use `isCanceled` instead
   */
  canceled: Ref<boolean>
  /**
   * isAborted alias
   */
  isCanceled: Ref<boolean>
}
export interface StrictUseAxiosReturn<T> extends UseAxiosReturn<T> {
  /**
   * Manually call the axios request
   */
  execute: (
    url?: string,
    config?: AxiosRequestConfig
  ) => PromiseLike<StrictUseAxiosReturn<T>>
}
export interface EasyUseAxiosReturn<T> extends UseAxiosReturn<T> {
  /**
   * Manually call the axios request
   */
  execute: (
    url: string,
    config?: AxiosRequestConfig
  ) => PromiseLike<EasyUseAxiosReturn<T>>
}
export interface UseAxiosOptions {
  /**
   * Will automatically run axios request when `useAxios` is used
   *
   */
  immediate?: boolean
}
export declare function useAxios<T = any>(
  url: string,
  config?: AxiosRequestConfig,
  options?: UseAxiosOptions
): StrictUseAxiosReturn<T> & PromiseLike<StrictUseAxiosReturn<T>>
export declare function useAxios<T = any>(
  url: string,
  instance?: AxiosInstance,
  options?: UseAxiosOptions
): StrictUseAxiosReturn<T> & PromiseLike<StrictUseAxiosReturn<T>>
export declare function useAxios<T = any>(
  url: string,
  config: AxiosRequestConfig,
  instance: AxiosInstance,
  options?: UseAxiosOptions
): StrictUseAxiosReturn<T> & PromiseLike<StrictUseAxiosReturn<T>>
export declare function useAxios<T = any>(
  config?: AxiosRequestConfig
): EasyUseAxiosReturn<T> & PromiseLike<EasyUseAxiosReturn<T>>
export declare function useAxios<T = any>(
  instance?: AxiosInstance
): EasyUseAxiosReturn<T> & PromiseLike<EasyUseAxiosReturn<T>>
export declare function useAxios<T = any>(
  config?: AxiosRequestConfig,
  instance?: AxiosInstance
): EasyUseAxiosReturn<T> & PromiseLike<EasyUseAxiosReturn<T>>