useLoaderAndShowErrorByModal
This composable provides a convenient wrapper around useLoader and axios. It allows to show a error message with modal easily, with 0 configuration.
Overview
typescript
declare function useLoaderAndShowErrorByModal<T>(initialValue?: T): {
data: Ref<T>;
errors: Ref<{
message: string;
errors?: Record<string, string[]> | undefined;
}>;
loader: (callback: () => Promise<T>) => Promise<T>;
loading: Ref<boolean>;
};Params
- initialData: Initial data state (by default, initial data is
undefined, it's optional).
Return Values
- data: The result of the asynchronous function that is passed in.
- errors: an error object if the data fetching failed.
- loader: a function that can be used to get and refresh the data returned by the
handlerfunction. - loading: a boolean indicating whether the data is still being fetched.
Example
html
<template>
<button label="Send Now!" :loading="loading" @click="postData" />
</template>
<script setup lang="ts">
import { Button } from '@/components/button';
import { useLoaderAndShowAndShowErrorByModal } from '@/composables';
import axios from 'axios';
const { data, errors, loader, loading } =
useLoaderAndShowAndShowErrorByModal<{
data: Record<string, unknown>[];
errors?: Record<string, unknown>;
}>();
const postData = (body: Record<string, unknown>) => {
// If an error occurs, a modal will be showed with an API error, or a default error.
loader(
// You can wrap this axios.get request for better scalability of your project
() =>
axios.post('/endpoint', {
body,
}),
);
};
</script>