Saltar al contenido principal

useLoading()

Ayuda a rastrear el estado de carga y de error de funciones asíncronas imperativas.

consejo

useSuspense() o useDLE() son mejores para endpoints GET/de lectura.

Uso​

<script setup lang="ts">
  import { useLoading, useController } from '@data-client/vue';
  import { PostResource } from './PostResource';
  import PostForm from './PostForm.vue';

  const emit = defineEmits<{ navigateToPost: [id: number] }>();
  const ctrl = useController();
  // highlight-start
  const [handleSubmit, loading, error] = useLoading(
    async (data: FormData) => {
      const post = await ctrl.fetch(PostResource.getList.push, data);
      emit('navigateToPost', post.id);
    },
  );
  // highlight-end
</script>

<template>
  <PostForm @submit="handleSubmit" :loading="loading" :error="error" />
</template>

Devuelve la función envuelta junto con los refs loading y error. La función envuelta es estable, por lo que no se necesita una lista de dependencias: los refs o props que lee se leen en el momento de la llamada.

Tipos​

export default function useLoading<
  F extends (...args: any) => Promise<any>,
>(func: F): [F, Ref<boolean>, Ref<Error | undefined>];

loading es true mientras la promesa devuelta está pendiente. Si func es rechazada, el rechazo se captura y se guarda en error; se limpia de nuevo en la siguiente llamada.

Ejemplos​

Creación de tareas​

Explora el ejemplo vue-todo-app

Abrir en StackBlitzVer código fuente

More Demos