useAxios

Category

@Integrations

Export Size

1.23 kB

Package

@reause/integrations

Last Changed

5 days ago

Wrapper for axios

Demo

Install

npm i axios@^1

Usage

import { useAxios } from '@reause/integrations'

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

Return Values

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

With Axios Instance

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

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

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

With Config Options

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

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

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

Manual Execution

When you don't pass a url, the request won't fire immediately:

import { useAxios } from '@reause/integrations'

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

The execute function url is optional - url2 will replace url1:

import { useAxios } from '@reause/integrations'

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

The execute function can accept config only:

import { useAxios } from '@reause/integrations'

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

Awaiting Results

The return value is thenable, so you can await it:

import { useAxios } from '@reause/integrations'

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

// await a re-execution — resolves with the shell once the request settled
const snapshot = await execute()
// data is now populated

Or await the execute function:

import { useAxios } from '@reause/integrations'

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

Options

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'),
})

Type Declarations

Toggle

export interface UseAxiosReturn<T, R = AxiosResponse<T>, _D = any, O extends UseAxiosOptions = UseAxiosOptions<T>> {
    response: R | undefined;
    data: O extends UseAxiosOptionsWithInitialData<T> ? T : T | undefined;
    isFinished: boolean;
    isLoading: boolean;
    isAborted: boolean;
    error: unknown | undefined;
    abort: (message?: string | undefined) => void;
    cancel: (message?: string | undefined) => void;
    isCanceled: boolean;
}

export interface StrictUseAxiosReturn<T, R, D, O extends UseAxiosOptions = UseAxiosOptions<T>> extends UseAxiosReturn<T, R, D, O> {
    execute: (url?: string | AxiosRequestConfig<D>, config?: AxiosRequestConfig<D>) => Promise<StrictUseAxiosReturn<T, R, D, O>>;
}

export interface EasyUseAxiosReturn<T, R, D> extends UseAxiosReturn<T, R, D> {
    execute: (url: string, config?: AxiosRequestConfig<D>) => Promise<EasyUseAxiosReturn<T, R, D>>;
}

export interface UseAxiosThenable<X> extends PromiseLike<X> {
    catch: <TResult = never>(onRejected?: ((reason: any) => TResult | PromiseLike<TResult>) | null) => PromiseLike<X | TResult>;
}

export interface UseAxiosOptionsBase<T = any> {
    immediate?: boolean;
    shallow?: boolean;
    abortPrevious?: boolean;
    onError?: (e: unknown) => void;
    onSuccess?: (data: T) => void;
    resetOnExecute?: boolean;
    onFinish?: () => void;
}

export interface UseAxiosOptionsWithInitialData<T> extends UseAxiosOptionsBase<T> {
    initialData: T;
}

export type UseAxiosOptions<T = any> = UseAxiosOptionsBase<T> | UseAxiosOptionsWithInitialData<T>

export function useAxios<T = any, R = AxiosResponse<T>, D = any, O extends UseAxiosOptionsWithInitialData<T> = UseAxiosOptionsWithInitialData<T>>(url: string, config?: AxiosRequestConfig<D>, options?: O): StrictUseAxiosReturn<T, R, D, O> & UseAxiosThenable<StrictUseAxiosReturn<T, R, D, O>>

export function useAxios<T = any, R = AxiosResponse<T>, D = any, O extends UseAxiosOptionsWithInitialData<T> = UseAxiosOptionsWithInitialData<T>>(url: string, instance?: AxiosInstance, options?: O): StrictUseAxiosReturn<T, R, D, O> & UseAxiosThenable<StrictUseAxiosReturn<T, R, D, O>>

export function useAxios<T = any, R = AxiosResponse<T>, D = any, O extends UseAxiosOptionsWithInitialData<T> = UseAxiosOptionsWithInitialData<T>>(url: string, config: AxiosRequestConfig<D>, instance: AxiosInstance, options?: O): StrictUseAxiosReturn<T, R, D, O> & UseAxiosThenable<StrictUseAxiosReturn<T, R, D, O>>

export function useAxios<T = any, R = AxiosResponse<T>, D = any, O extends UseAxiosOptionsBase<T> = UseAxiosOptionsBase<T>>(url: string, config?: AxiosRequestConfig<D>, options?: O): StrictUseAxiosReturn<T, R, D, O> & UseAxiosThenable<StrictUseAxiosReturn<T, R, D, O>>

export function useAxios<T = any, R = AxiosResponse<T>, D = any, O extends UseAxiosOptionsBase<T> = UseAxiosOptionsBase<T>>(url: string, instance?: AxiosInstance, options?: O): StrictUseAxiosReturn<T, R, D, O> & UseAxiosThenable<StrictUseAxiosReturn<T, R, D, O>>

export function useAxios<T = any, R = AxiosResponse<T>, D = any, O extends UseAxiosOptionsBase<T> = UseAxiosOptionsBase<T>>(url: string, config: AxiosRequestConfig<D>, instance: AxiosInstance, options?: O): StrictUseAxiosReturn<T, R, D, O> & UseAxiosThenable<StrictUseAxiosReturn<T, R, D, O>>

export function useAxios<T = any, R = AxiosResponse<T>, D = any>(config?: AxiosRequestConfig<D>): EasyUseAxiosReturn<T, R, D> & UseAxiosThenable<EasyUseAxiosReturn<T, R, D>>

export function useAxios<T = any, R = AxiosResponse<T>, D = any>(instance?: AxiosInstance): EasyUseAxiosReturn<T, R, D> & UseAxiosThenable<EasyUseAxiosReturn<T, R, D>>

export function useAxios<T = any, R = AxiosResponse<T>, D = any>(config?: AxiosRequestConfig<D>, instance?: AxiosInstance): EasyUseAxiosReturn<T, R, D> & UseAxiosThenable<EasyUseAxiosReturn<T, R, D>>

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

4da88 - fix(integrations): resolve useAxios audit findings (#796)

b8705 - feat(integrations): add useAxios (#82)