VueUseuseAsyncState
Reactive async state. Will not block your setup function and will trigger changes once the promise is ready.
Demo
Ready: false
Loading: true
{}
Usage
ts
import axios from 'axios'
import { useAsyncState } from '@vueuse/core'
const { state, isReady, isLoading } = useAsyncState(
axios
.get('https://jsonplaceholder.typicode.com/todos/1')
.then(t => t.data),
{ id: null },
)
import axios from 'axios'
import { useAsyncState } from '@vueuse/core'
const { state, isReady, isLoading } = useAsyncState(
axios
.get('https://jsonplaceholder.typicode.com/todos/1')
.then(t => t.data),
{ id: null },
)
Type Declarations
Show Type Declarations
typescript
export interface UseAsyncStateReturn<
Data,
Params extends any[],
Shallow extends boolean
> {
state: Shallow extends true ? Ref<Data> : Ref<UnwrapRef<Data>>
isReady: Ref<boolean>
isLoading: Ref<boolean>
error: Ref<unknown>
execute: (delay?: number, ...args: Params) => Promise<Data>
}
export interface UseAsyncStateOptions<Shallow extends boolean, D = any> {
/**
* Delay for executing the promise. In milliseconds.
*
* @default 0
*/
delay?: number
/**
* Execute the promise right after the function is invoked.
* Will apply the delay if any.
*
* When set to false, you will need to execute it manually.
*
* @default true
*/
immediate?: boolean
/**
* Callback when error is caught.
*/
onError?: (e: unknown) => void
/**
* Callback when success is caught.
* @param {D} data
*/
onSuccess?: (data: D) => void
/**
* Sets the state to initialState before executing the promise.
*
* This can be useful when calling the execute function more than once (for
* example, to refresh data). When set to false, the current state remains
* unchanged until the promise resolves.
*
* @default true
*/
resetOnExecute?: boolean
/**
* Use shallowRef.
*
* @default true
*/
shallow?: Shallow
/**
*
* An error is thrown when executing the execute function
*
* @default false
*/
throwError?: boolean
}
/**
* Reactive async state. Will not block your setup function and will trigger changes once
* the promise is ready.
*
* @see https://vueuse.org/useAsyncState
* @param promise The promise / async function to be resolved
* @param initialState The initial state, used until the first evaluation finishes
* @param options
*/
export declare function useAsyncState<
Data,
Params extends any[] = [],
Shallow extends boolean = true
>(
promise: Promise<Data> | ((...args: Params) => Promise<Data>),
initialState: Data,
options?: UseAsyncStateOptions<Shallow, Data>
): UseAsyncStateReturn<Data, Params, Shallow>
export interface UseAsyncStateReturn<
Data,
Params extends any[],
Shallow extends boolean
> {
state: Shallow extends true ? Ref<Data> : Ref<UnwrapRef<Data>>
isReady: Ref<boolean>
isLoading: Ref<boolean>
error: Ref<unknown>
execute: (delay?: number, ...args: Params) => Promise<Data>
}
export interface UseAsyncStateOptions<Shallow extends boolean, D = any> {
/**
* Delay for executing the promise. In milliseconds.
*
* @default 0
*/
delay?: number
/**
* Execute the promise right after the function is invoked.
* Will apply the delay if any.
*
* When set to false, you will need to execute it manually.
*
* @default true
*/
immediate?: boolean
/**
* Callback when error is caught.
*/
onError?: (e: unknown) => void
/**
* Callback when success is caught.
* @param {D} data
*/
onSuccess?: (data: D) => void
/**
* Sets the state to initialState before executing the promise.
*
* This can be useful when calling the execute function more than once (for
* example, to refresh data). When set to false, the current state remains
* unchanged until the promise resolves.
*
* @default true
*/
resetOnExecute?: boolean
/**
* Use shallowRef.
*
* @default true
*/
shallow?: Shallow
/**
*
* An error is thrown when executing the execute function
*
* @default false
*/
throwError?: boolean
}
/**
* Reactive async state. Will not block your setup function and will trigger changes once
* the promise is ready.
*
* @see https://vueuse.org/useAsyncState
* @param promise The promise / async function to be resolved
* @param initialState The initial state, used until the first evaluation finishes
* @param options
*/
export declare function useAsyncState<
Data,
Params extends any[] = [],
Shallow extends boolean = true
>(
promise: Promise<Data> | ((...args: Params) => Promise<Data>),
initialState: Data,
options?: UseAsyncStateOptions<Shallow, Data>
): UseAsyncStateReturn<Data, Params, Shallow>
Source
Contributors
Anthony Fu
丶远方
Flamenco
machete
Brain777777
Mao Mr
Jelf
Sergey Shumov
lsdsjy
IIFelix
Alex Francev
webfansplz
Shinigami
Shahar Kosti
Alex Kozack
ordago
Jacob Clevenger
Antério Vieira