20 - Requisições HTTP

Olá pessoal, na vigésima aula do treinamento de Vue.js, iremos trabalhar com requisições HTTP.

Iremos implementar um exemplo simples de requisição GET, utilizando a estrutura fetch nativa do JavaScript.

Utilizando o site JSONPlaceholder, iremos obter uma lista de comentários, contendo as características: id, userId, title e body.

Veja abaixo a estrutura do nosso componente: Exemplo13Requisicao.vue:

O arquivo App.vue, iremos importar o componente e realizar a referência no HTML:

<script setup>
    // Importação dos componentes
    // import Exemplo01 from './componentes/Exemplo01Interpolacao.vue';
    // import Exemplo02 from './componentes/Exemplo02Condicional.vue';
    // import Exemplo03 from './componentes/Exemplo03Laco.vue';
    // import Exemplo04 from './componentes/Exemplo04HTML.vue';
    // import Exemplo05 from './componentes/Exemplo05Model.vue';
    // import Exemplo06 from './componentes/Exemplo06Classe.vue';
    // import Exemplo07 from './componentes/Exemplo07Clique.vue';
    // import Exemplo08 from './componentes/Exemplo08Teclado.vue';
    // import Exemplo09 from './componentes/Exemplo09Enviar.vue';
    // import Exemplo10 from './componentes/Exemplo10Lifecycle.vue';
    // import Exemplo11 from './componentes/Exemplo11Props1.vue';
    // import Exemplo12 from './componentes/Exemplo12Rotas.vue';
    import Exemplo13 from './componentes/Exemplo13Requisicao.vue';
</script>

<template>
    <Exemplo13></Exemplo13>
</template>

Abaixo deixo um vídeo mostrando cada etapa desta aula: