useRequestState
A tiny utility with no dependencies for tracking the state of async operations
const { isLoading, isFailure, wrapRequest, errorMessage } = useRequestState();
const character = ref();
const fetchCharacter = wrapRequest(characterId => {
const response = await axios.get(`https://swapi.dev/api/people/${characterId}`);
character.value = response.data;
});
// or return a value
const getCharacter = wrapRequest(characterId => {
const response = await axios.get(`https://swapi.dev/api/people/${characterId}`);
return response.data;
});
API
RequestState
import { RequestState } from 'vue-use-request-state';
The enum that represents the request state. There are 4 values:
NOT_REQUESTED = 0
LOADING = 1
SUCCESS = 2
FAILURE = 3
useRequestState
import useRequestState from 'vue-use-request-state';
useRequestState
is the entry point to the library. It returns a bunch of utilities and computed values:
wrapRequest
reset
: A function that resets the request state toNOT_REQUESTED
and the error toundefined
requestState
: The current request stateerror
: The error that the wrapped request throwsisLoading
: Computed ref to check if the request state isLOADING
isSuccess
: Computed ref to check if the request state isSUCCESS
isFailure
: Computed ref to check if the request state isFAILURE
isNotRequested
: Computed ref to check if the request state isNOT_REQUESTED
errorMessage
: Computed ref for theerror.message
orundefined
if there is no error
wrapRequest
Create a function that wraps your async request in a try catch block that updates the requestState
and error
on failure or success
const { wrapRequest: wrapDoSomething } = useRequestState();
const doSomething = wrapDoSomething(async () => {
// Await your async operation
});
You don't need to include a try catch block, but you could if you needed extra logic. Keep in mind the request state is only set to
FAILURE
when an error is an uncaught error thrown inside the callback.