Consumindo dados de API com Axios e Vue

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 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 antes de continuar a ler este artigo.

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.

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.

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.

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:

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. :)