0Pricing
Vue Academy · Aula

useFetch: composable de dados assíncronos

refs de dados, carregamento e erro, busca na montagem, função de nova busca e limpeza com AbortController.

useFetch: composable de dados assíncronos é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

O objetivo de useFetch

A busca assíncrona de dados se repete em toda parte: indicadores de carregamento, tratamento de erros e a própria solicitação. useFetch reúne tudo isso em uma única função reutilizável, que retorna data, loading e error.

As três referências reativas

Comece com três referências que descrevem o estado de qualquer solicitação assíncrona.

import { ref } from "vue";
function useFetch(url) {
  const data = ref(null);
  const loading = ref(false);
  const error = ref(null);
}

A rotina de busca

Escreva uma função assíncrona que altere loading, faça a solicitação e armazene o resultado. Vamos aprimorar o tratamento de erros em seguida.

async function execute() {
  loading.value = true;
  const res = await fetch(url);
  data.value = await res.json();
  loading.value = false;
}

try / catch / finally

Envolva a solicitação para que os erros sejam armazenados em error e loading seja sempre redefinido, em caso de sucesso ou falha, dentro de finally.

async function execute() {
  loading.value = true;
  error.value = null;
  try {
    const res = await fetch(url);
    if (!res.ok) throw new Error("HTTP " + res.status);
    data.value = await res.json();
  } catch (e) {
    error.value = e;
  } finally {
    loading.value = false;
  }
}

Buscando dados em onMounted

Inicie a solicitação quando o componente for montado para que os dados sejam carregados automaticamente.

import { onMounted } from "vue";
onMounted(execute);

Uma função refetch

Exponha execute como refetch para que os consumidores possam recarregar os dados sob demanda — após uma alteração ou ao clicar em um botão de nova tentativa.

return { data, loading, error, refetch: execute };

AbortController para limpeza

Se o componente for desmontado durante uma solicitação, cancele a busca para evitar a alteração do estado de um componente já desmontado. Crie um AbortController e passe seu sinal.

const controller = new AbortController();
const res = await fetch(url, { signal: controller.signal });

Cancelando ao desmontar

Cancele a solicitação em andamento em onUnmounted. Ignore o erro de cancelamento resultante no bloco de captura.

import { onUnmounted } from "vue";
onUnmounted(() => controller.abort());

O useFetch completo

Depois de montada, a função reutilizável gerencia o carregamento, os erros, novas buscas e a limpeza em uma única unidade organizada.

function useFetch(url) {
  const data = ref(null);
  const loading = ref(false);
  const error = ref(null);
  const controller = new AbortController();
  async function execute() {
    loading.value = true; error.value = null;
    try {
      const res = await fetch(url, { signal: controller.signal });
      data.value = await res.json();
    } catch (e) {
      if (e.name !== "AbortError") error.value = e;
    } finally {
      loading.value = false;
    }
  }
  onMounted(execute);
  onUnmounted(() => controller.abort());
  return { data, loading, error, refetch: execute };
}

Usando em um componente

Os consumidores renderizam com base nas três referências: um indicador de carregamento enquanto os dados estão sendo carregados, uma mensagem de erro em caso de falha e os dados nos demais casos.

const { data, loading, error } = useFetch("/api/posts");

Padrão do modelo

Use o estado no modelo para criar uma experiência completa.

<p v-if="loading">Loading...</p>
<p v-else-if="error">{{ error.message }}</p>
<ul v-else>
  <li v-for="p in data" :key="p.id">{{ p.title }}</li>
</ul>

Verificação rápida

Qual é a função de AbortController em useFetch?

Recapitulação

Você criou useFetch(url), que expõe as referências data, loading e error, faz a busca em onMounted usando o padrão try/catch/finally, oferece uma função refetch e limpa um AbortController em onUnmounted.

Perguntas Frequentes

A aula “useFetch: composable de dados assíncronos” é grátis?

Sim — o texto completo de “useFetch: composable de dados assíncronos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “useFetch: composable de dados assíncronos”?

refs de dados, carregamento e erro, busca na montagem, função de nova busca e limpeza com AbortController. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “useFetch: composable de dados assíncronos”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. O que caracteriza um bom composable
  2. useCounter: um composable simples
  3. useFetch: composable de dados assíncronos
  4. VueUse: a biblioteca de composables
← Voltar para Vue Academy