dev-resources.site

for different kinds of informations.

Desenvolvimento de Componentes Assíncronos com Vue.js

Published at

10/31/2023

1. Introdução aos Componentes Assíncronos em Vue.js

Antes de mergulhar nos exemplos práticos, é essencial entender o conceito de assincronia em Vue.js.

Os componentes assíncronos geralmente envolvem operações que não podem ser concluídas imediatamente, como requisições de dados externos.

2. Carregando Dados de uma API Assíncrona

Um caso comum é carregar dados de uma API. Vamos criar um componente que exibe uma lista de usuários após obter os dados de uma API assíncrona.

<template>
  <div>
    <h2>Lista de Usuários</h2>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [],
    };
  },
  async mounted() {
    try {
      const response = await fetch('https://api.example.com/users');
      this.users = await response.json();
    } catch (error) {
      console.error('Erro ao carregar usuários:', error);
    }
  },
};
</script>

Neste exemplo, usamos o ciclo de vida mounted para realizar a chamada assíncrona à API assim que o componente é montado.

3. Trabalhando com Promessas e Promise.all

Em alguns casos, pode ser necessário realizar várias chamadas assíncronas e aguardar que todas sejam concluídas. O uso de Promise.all é uma abordagem eficaz.

<template>
  <div>
    <h2>Informações Combinadas</h2>
    <ul>
      <li v-for="info in combinedInfo" :key="info.id">{{ info.data }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info1: null,
      info2: null,
    };
  },
  async mounted() {
    try {
      const request1 = fetch('https://api.example.com/info1');
      const request2 = fetch('https://api.example.com/info2');

      const [response1, response2] = await Promise.all([request1, request2]);

      this.info1 = await response1.json();
      this.info2 = await response2.json();
    } catch (error) {
      console.error('Erro ao carregar informações:', error);
    }
  },
  computed: {
    combinedInfo() {
      if (this.info1 && this.info2) {
        return [{ id: 1, data: this.info1 }, { id: 2, data: this.info2 }];
      }
      return [];
    },
  },
};
</script>

Neste exemplo, realizamos duas chamadas assíncronas simultâneas e combinamos os resultados em um único array usando Promise.all.

4. Lazy Loading de Componentes

O Vue.js oferece a capacidade de carregar componentes de forma assíncrona somente quando são necessários. Isso é conhecido como "lazy loading".

<template>
  <div>
    <h2>Página Principal</h2>
    <button @click="loadDynamicComponent">Carregar Componente Dinâmico</button>
    <component :is="dynamicComponent" v-if="dynamicComponent" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicComponent: null,
    };
  },
  methods: {
    async loadDynamicComponent() {
      try {
        const module = await import('./DynamicComponent.vue');
        this.dynamicComponent = module.default;
      } catch (error) {
        console.error('Erro ao carregar componente dinâmico:', error);
      }
    },
  },
};
</script>

Neste exemplo, carregamos o componente DynamicComponent de forma assíncrona quando um botão é clicado.

Conclusão

Desenvolver componentes assíncronos com Vue.js é fundamental para criar aplicações robustas e eficientes. Ao compreender os conceitos apresentados e aplicar exemplos práticos, você estará preparado para lidar com operações assíncronas em seus projetos Vue.js.

Referências

https://pt.vuejs.org/guide/components/async.html#basic-usage

component Article's

30 articles in total