Jonas Castro

Consumo de api com axios

Fala galera, como vocês estão ?

No artigo de hoje vamos falar sobre consumo de api utilizando axios

Introdução

Quando estamos desenvolvendo um projeto web, na maioria das vezes é muito comum haver a necessidade de consumirmos uma API. As API’s fornecem recursos que podem ser utilizados pelo cliente (quem faz as requisições).



Uma das maneiras de realizarmos essa comunicação entre, por exemplo, um projeto nosso e uma API externa, é utilizando a API fetch. A Api fetch provê ao navegador uma interface para a execução de requisições HTTP utilizando recursos como promises. Outra maneira de se realizar essa comunicação é utilizando um cliente http também baseado em promises, chamado Axios.

Características do axios

Algumas características do Axios são:

  • É isomórfico: Pode ser executado no navegador e no node js com a mesma base de código;
  • Transforma automaticamente para dados JSON
  • Intercepta solicitações e resposta;
  • Suporta Promises;

Utilizando axios

Vamos utilizar nosso velho amigo npm para instalar o axios

  npm install axios

Se preferir você pode utilizar yarn

  yarn  add axios

Após a instalação do Axios no projeto, precisamos importá-lo. para isso crie o arquivo teste_axios.js e escreva o código abaixo:

  • importando o axios.
  // importar o axios
  const axios = require('axios')
  • utilizando axios.
  // importar o axios
    const axios = require('axios')

    axios
    .get("https://api.github.com/orgs/rocketseat/repos")
    .then((res)=>{
      console.log(res.data)
    })
    .catch((error)=>{
      console.log(error)
    })

Vamos entender esse código. Com a importação realizada, foi feita uma requisição do tipo get utilizando o método get() para fazer a solicitação e como parâmetro passamos a URL base do endpoint; Dois métodos são implementados para obter os dados resultantes da requisição, .then() em caso de sucesso e um Catch() para capturar algum erro que possa porventura ocorrer; Os dois métodos recebem uma callback passando a resposta da API como parâmetro.



Além de fazer solicitações do tipo get(), com o Axios também podemos fazer requisições com outros verbos http, tais como: put, post, delete e patch.

Vamos testar executando o código com node teste_axios.js no seu terminal. Com isso, você recebe uma lista dos repositórios da rocketseat utilizando a api do github. A imagem abaixo apresenta uma parte do retorno:

drawing Resultado da execução

Enfim é isso, agora você consegue consumir qualquer API com essa biblioteca poderosa chamada axios.

Links