Jedi Cat Vue.js

# Axios

A melhor for que encontrei para usar o axios é criando um arquivo separado para concentrar todas as consultas, desta forma consigo compartilhar ela com toda a aplicação, ficando mais facil reutilizar um mesmo código em diversos lugares.

Seguindo a estrutura que defino na sessão Instalção > Estrutura de projetos, declaro as consultas dentro do arquivos searches > index.js.

import axios from "axios"

export function getUsuarios() {
  let url = 'http://algumacoisa.com.br/usuarios'

  return axios.get(url)
    .then(response => {
      return response
    })
    .catch(e => {
      console.log(e)
    })
    .finally(f => {
    })
}

export function updateUsuario(id) {
  let url = `http://algumacoisa.com.br/usuarios/${id}`

  return axios.put(url)
    .then(response => {
      return response
    })
    .catch(e => {
      console.log(e)
    })
    .finally(f => {
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

Agora em algum componente qualquer basta importar o arquivo:

<template>
  <div>
  </div>
</template>

<script>
import { getUsuarios } from '@/searches';

export default {
  name: 'Pai',
  data () {
    return {
    }
  },
  methods: {
    async obterUsuarios () {
      let usuarios = await getUsuarios()
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Costumo usar async/await onde chamo as funções pois pode demorar e para não dar alguma inconsistência.

← Cheat Sheet →