Consumindo dados de API com Axios e Vue
Tags: front, javascript, vue, axios
Published: 2019-09-21 23:29:29

---
title: Consumindo dados de API com Axios e Vue
published: true
description: Como consumir uma API com Axios e Vue
tags: front, javascript, vue, axios
---

# Introdução

Uma das tarefas mais recorrentes de quem trabalha com web, principalmente com aplicações front-end, é realizar requisições a outros serviços, plataformas e suas interfaces, para que possamos fazer operações comuns como autenticação, solicitar dados salvos em um servidor remoto ou apenas listar fotos de gatinhos.

Neste artigo vamos consumir dados de uma API para listar cores no intuito de aprender como solicitar dados de um serviço online disponível através de API REST que responde com dados em JSON através de HTTP. Para tal vamos utilizar JavaScript com o framework Vue no CodeSandbox, utilizando Axios para a facilitar a comunicação, que é uma biblioteca amplamente utilizada no mercado para esta finalidade.

Para facilitar o foco no consumo de dados, você pode iniciar criando um **Fork** do [template em Vue com Axios que preparei](https://codesandbox.io/s/exemplo-consumir-api-gmdrq) para realizar o exercício. Neste template já existem os componentes requeridos em Vue SFC, sendo necessárias apenas alterações no método `getPosts` para que seja realizada a solicitação de dados e a atribuição no objeto local para renderizar a página com os dados da vindos da API.

# Realizando a requisição

Utilizaremos o método `get` da biblioteca, que recebe um parâmetro de **URL**, ou seja o endereço na web para o qual estamos solicitando dados. Neste caso será o endereço `https://reqres.in/api/posts`, que já está na variável `serverUrl`. Este método do Axios é equivalente ao método HTTP GET, que solicita dados a partir de um URL, o que foge do escopo deste artigo. Se você não conhece é bom estudar sobre [verbos HTTP](https://developer.mozilla.org/pt-BR/docs/Web/HTTP/Methods) antes de continuar a ler este artigo.

```javascript
methods: {
    getPosts: function() {
      const promise = axios.get(serverUrl)
    }
  }
```

Os métodos de requisição de web do Axios são assíncronos. Isso significa que eles não retornam o resultado da solicitação imediatamente a uma variável, permitindo que seja feita uma atribuição direta do resultado da requisição. na verdade, retornam uma referência à promessa de que em algum momento vamos receber uma resposta, seja boa ou ruim. Em outras palavras este método retorna uma `Promise` que se tiver sucesso executará a próxima função atribuída com o método `then` na `promise`; e se tiver falha (por algum motivo não conseguir realizar a requisição ao servidor), executará a próxima função atribuída com o método `catch` na `promise`.

```javascript
methods: {
  getPosts: function() {
    // requisição GET que retorna promessa de resultado
    const promise = axios.get(serverUrl)
     // .then para definir o que fazer em caso de sucesso
    promise.then(response => {
      // deu certo, o que fazer?
    })
     // .catch para definir o que fazer em caso de falha
    promise.catch(err => {
      // falhou, o que fazer?
    })
  }
}
```

E então, dentro da função atribuída ao `then`, podemos utilizar a resposta do servidor remoto. Os dados da resposta estão presentes em `response.data`, pois o parâmetro da função atribuída receberá os dados de resposta da requisição e, por convenção, chamamos este parâmetro de response. Podemos atribuir esses dados ao objeto `this.apiData` para que os posts sejam renderizados pelo componente em Vue e atribuindo null ao objeto `this.err` para informar ao mesmo componente que não há erro.

```javascript
methods: {
  getPosts: function() {
    // requisição GET que retorna promessa de resultado
    const promise = axios.get(serverUrl)
     // .then para definir o que fazer em caso de sucesso
    promise.then(response => {
      this.err = null;
      this.apiData = response.data;
    })
     // .catch para definir o que fazer em caso de falha
    promise.catch(err => {
      // falhou, o que fazer?
    })
  }
}
```

Na função atribuída com `catch` à `promise` podemos definir o que deve ser feito caso a requisição falhe e dispare uma exceção, recebida aqui como parâmetro `err`, para ser tratada. Para tal podemos atribuir `null` ao objeto `this.apiData` para remover possíveis os dados existentes e atribuir o objeto de erro recebido ao objeto `this.err` para repassar o mesmo ao componente como forma de informar o erro ocorrido.

```javascript
methods: {
  getPosts: function() {
    // requisição GET que retorna promessa de resultado
    const promise = axios.get(serverUrl)
     // .then para definir o que fazer em caso de sucesso
    promise.then(response => {
      this.err = null;
      this.apiData = response.data;
    })
     // .catch para definir o que fazer em caso de falha
    promise.catch(err => {
      this.err = err;
      this.apiData = null;
    })
  }
}
```

# Resultado

Assim temos a renderização da lista de cores:

![Resultado](https://thepracticaldev.s3.amazonaws.com/i/8zqba0jvhcn52j0fzvch.png)

Este pequeno exercício sobre como realizar requisições para APIs é apenas uma introdução e você pode contar que farei mais exercícios pontuais em mais artigos. (▀̿Ĺ̯▀̿ ̿)

# Agradecimento

Ao @Fayhen por sua paciência ao revisar este texto. :)