useAsyncState
Reactive async state. Will not block your setup function and will trigger changes once the promise is ready.
Demo
Ready: true
Loading: false
userId: 1
id: 1
title: delectus aut autem
completed: false
Usage
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
export interface UseAsyncStateReturn<Data, 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: any[]) => Promise<Data>
}
export interface AsyncStateOptions<Shallow extends boolean> {
/**
* Delay for executing the promise. In milliseconds.
*
* @default 0
*/
delay?: number
/**
* Excute 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
/**
* 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
}
/**
* Reactive async state. Will not block your setup function and will triggers 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, Shallow extends boolean = true>(
promise: Promise<Data> | ((...args: any[]) => Promise<Data>),
initialState: Data,
options?: AsyncStateOptions<Shallow>
): UseAsyncStateReturn<Data, Shallow>
export interface UseAsyncStateReturn<Data, 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: any[]) => Promise<Data>
}
export interface AsyncStateOptions<Shallow extends boolean> {
/**
* Delay for executing the promise. In milliseconds.
*
* @default 0
*/
delay?: number
/**
* Excute 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
/**
* 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
}
/**
* Reactive async state. Will not block your setup function and will triggers 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, Shallow extends boolean = true>(
promise: Promise<Data> | ((...args: any[]) => Promise<Data>),
initialState: Data,
options?: AsyncStateOptions<Shallow>
): UseAsyncStateReturn<Data, Shallow>
Source
Contributors
Anthony Fu
machete
Sergey Shumov
lsdsjy
IIFelix
Alex Francev
webfansplz
Shinigami
Shahar Kosti
Alex Kozack
ordago
Jacob Clevenger
Antério Vieira