vue-use-fetcher

vue-use-fetcher é um composable simples e reativo para Vue 3, feito para facilitar o controle de requisições assíncronas com loading, retry automático, exibição de erro, e callback de reexecução.

---

✨ Recursos

• Estado reativo (ref, reactive)
• Controle de tentativas (retry)
• Callback para nova tentativa
• Mensagens de erro customizadas
• Compatível com diretiva v-load (exibição automática de loading, tentativas e erro)

---

📦 Instalação

npm install vue-use-fetcher

Ou com Yarn:

yarn add vue-use-fetcher

⚙️ Configuração

Importe o useFetch no seu componente:

import { useFetch } from 'vue-use-fetcher';

🔧 Como usar

const { data, fetcher, fetchData } = useFetch();

async function carregarDados() {
  await fetchData(async () => {
    const response = await axios.get('/api/exemplo');
    return response.data;
  });
}

📄 Estrutura do fetcher

interface Fetcher {
  isLoading: boolean;
  retry: number;
  totalRetries: number;
  error: boolean;
  errorMessage: string;
  retryCallback: null | (() => Promise<void>);
}

✅ Exemplo completo

  <template>
    <div v-load="fetcher">
      Nenhum resultado encontrado.
    </div>
  </template>

  <script setup lang="ts">
  import { useFetch } from 'vue-use-fetcher';
  import axios from 'axios';

  const { data, fetcher, fetchData } = useFetch();

  onMounted(() => {
    fetchData(() => axios.get('/api/dados').then(r => r.data));
  });
  </script>