Preparando o acesso ao backend

Uma das primeiras tarefas a serem realizadas após a instalação do projeto Vue é preparar o acesso do framework ao backend. Existem centenas de formas de se fazer isso, vou utilizar uma que está presente em quase todos os meus projetos. Quando eu penso em "acesso do frontend ao backend" gosto de pensar como um "service", um conjunto de classes que proveem acesso ao servidor.

Todos estes serviços podem estar no diretório src/services que iremos criar. Lembre-se que, pensou em acesso ao backend, o código para isso está no "services".

Instalando o Axios

Uma consulta do frontend ao backend pode ser realizado através da biblioteca axios, que está disponível para uso em qualquer tipo de ambiente javascript. Nossa primeira tarefa é instalar esta biblioteca:

$ npm install axios --save
1

Após a instalação, vamos criar o arquivo src/services/http.js que será o arquivo responsável em realizar uma configuração inicial na biblioteca, veja:

import axios from 'axios'

export default axios.create({
  baseURL: 'https://northwind.now.sh/api',
  timeout: 10000,
  headers: { 'Content-Type': 'application/json' }
})
1
2
3
4
5
6
7

Existem muitos detalhes neste arquivo que estão relacionados ao Javascript em si, não ao Vue. A seguir vamos comentar algumas partes:

  • Em import axios from 'axios', importamos a biblioteca "axios" diretamente do diretório node_modules. O compilador vai ser inteligente o suficiente para saber procurar a biblioteca neste diretório.

  • Em export default temos a instância direta da biblioteca axios. O método create é usado para que possamos informar alguns parâmetros extras. Se você conhece o pattern Factory, vai se identificar aqui.

Dica

O export exporta a "classe" para que possa ser importado por outros arquivos.

  • Os parâmetros, a princípio, são apenas 3. O baseURL é o mais importante, ele "aponta" para a url do nosso servidor backend (se você sentiu falta do uso de enviroments aqui, releve. Esse é um curso de principiantes). O parâmetro timeout fala por si só, e o parâmetro headers está relacionado ao cabeçalho da requisição http que será feita ao backend. Neste caso, estaremos sempre repassando o parâmetro Content-Type com o valor application/json. Aqui usamos Json que será a nossa forma de comunicação padrão.

Utilizando o Axios

Após configurar o Axios, ou seja, criar a classe http.js no diretório src/services, podemos criar uma classe que será responsável em acessar as informações sobre "categorias". O que vamos fazer, basicamente, é criar um service chamado "categories" com as seguintes funcionalidades:

Método URI Entrada Saída
GET /api/categories void Array contendo todas as categorias
GET /api/categories/:id id Uma categoria

Criando o service categories para acesso ao servidor

Crie o arquivo categories.js no diretório src/services, com o seguinte conteúdo:

import http from './http'

export default {
  getAll: () => http.get('/categories'),
  getOne: id => http.get(`/categories/${id}`)
}

1
2
3
4
5
6
7

Na primeira linha temos o import do http, que acabamos de criar. O uso do ./ indica o mesmo diretório onde está o arquivo principal. A partir desse momento não precisamos mais importar o Axios, já que o http faz isso. A constante categories possui duas propriedades, que na verdade são métodos.

O primeiro método se chama getAll e usa a especificação ECMAScript 2015 chamada de arrow function. Se você nunca viu isso, pode imaginar que () => http.get('/categories') é o mesmo que function() { return http.get('/categories') }. Fica a dica para estudar um pouco mais sobre essa especificação, pois a veremos muito em todo o código.

Ainda neste primeiro método, temos http.get que irá realizar uma requisição http ao endereço repassado. O responsável em gerenciar esse processo é o Axios.

O segundo método, getOne, faz o mesmo que o primeiro, só que repassamos o id da categoria.

Testando o service de categorias

Chegou o momento de ver algo funcionando. Vamos até o arquivo src/components/HelloWorld.vue e alterá-lo um pouco para exibir a lista de categorias.

Primeiro, limpe quase todas as informações não pertinentes:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Agora, importe o service na tag <script>, mas antes do export defualt:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
import  categories from '../services/categories'
export default {
  name: "HelloWorld",
  props: {
    msg: String
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Perceba que estamos importando categories através de um caminho absoluto. Ou seja, se estamos no diretório components, temos que subir um nível e acessar o diretório services. Para facilitar esse processo, pode-se utilizar um alias já criado pelo Vue chamado "@", que aponta diretamente para o diretório src. Então, a chamada ao service pode ser: import categories from '@/services/categories';

Após importar o categories, vamos usá-lo no método mounted, que é executado quando o componente HelloWorld está inicializado na app. Veja:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
import  categories  from '@/services/categories';
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  mounted () {
    categories.getAll().then( result => {
      console.log(result);
    })
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Perceba que chamamos o método "getAll" diretamente do service. O que vem depois já é novidade. Se você não reconhece o .then, ele está relacionado a Promises, um conceito do Javascript. É preciso saber que qualquer chamada do frontend ao backend é assíncrono, ou seja, algo como:

const items =  categories.getAll();
console.log(items);
1
2

É algo totalmente errado no "mundo" javascript. Só podemos "ler" o resultado do acesso ao backend quando isso for possível (pode demorar alguns segundos), e esse "retorno" é feito através de Promises. Basicamente, o método then será executado somente quando o backend retornar, e o resultado deste retorno é armazando na variável result, que pode ser lida pelo comando console.log.

Agora vamos testar a aplicação. Inicie-a com o comando npm run serve e vá até o Navegador. Abra a aplicação e abre o Chrome Dev Tools através da tecla F12. O que você verá é algo como:

Veja que o comando console.log exibiu o conteúdo da variável result, e que result.data contém o array de categorias que precisamos.

Até o momento já aprendemos a acessar o servidor e obter dados! Agora vamos aprender a exibí-los de forma coerente na aplicação.