Pular para o conteúdo principal

useLoading()

Ajuda a acompanhar o estado de carregamento e de erro de funções assíncronas imperativas.

dica

useSuspense() ou useDLE() são melhores para endpoints GET/de leitura.

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>

Retorna a função encapsulada junto com os refs loading e error. A função encapsulada é estável, portanto não é necessária uma lista de dependências: quaisquer refs ou props que ela lê são lidos no momento da chamada.

Tipos​

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

loading é true enquanto a promise retornada estiver pendente. Se func for rejeitada, a rejeição é capturada e armazenada em error; ela é limpa novamente na próxima chamada.

Exemplos​

Criação de Todo​

Explore o exemplo vue-todo-app

Abrir no StackBlitzVer código-fonte

More Demos