DEV Community 👩‍💻👨‍💻

Cover image for Como consumir API com JS Puro e Axios. (em 3 passos)
Juliana Félix
Juliana Félix

Posted on

Como consumir API com JS Puro e Axios. (em 3 passos)

Consumir API é acessar informações e serviços de um outro sistema que permite essa integração, sem a necessidade de a aplicação que consome a API conhecer detalhes de implementação do software.

Para fazer a conexão entre a aplicação e a API será utilizado o AXIOS que fará as requisições a API que será consumida e trará os dados da aplicação para o HTML.

Vamos consumir a API do Github e apresentar no HTML uma lista de repositórios de forma dinâmica.

1º PASSO
Adicione o link da cdn do AXIOS no seu documento HTML, ele será responsável para que se torne possível utilizar o AXIOS na aplicação

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Consumindo API</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input type="text" id="nomeUsuario" placeholder="Usuário do github:">
<button type="submit" onclick="trazerRepositorios()">Pesquisar</button>
<button onclick="location.reload()">Limpar</button>
<ul id="repos"></ul>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

</body>
</html>

2º PASSO
Crie um arquivo Javascript e adicione o caminho desse arquivo no HTML utilizando a tag 'script', OBS: É preciso inserir essa tag com o caminho do javascript na última linha da tag 'body' do arquivo HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Consumindo API</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input type="text" id="nomeUsuario" placeholder="Usuário do github:">
<button type="submit" onclick="trazerRepositorios()">Pesquisar</button>
<button onclick="location.reload()">Limpar</button>
<ul id="repos"></ul>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script src="main.js"></script>
Enter fullscreen mode Exit fullscreen mode

</body>
</html>

3º PASSO
No arquivo JavaScript crie uma função que chamará o axios para fazer as requisições a API de acordo com o nome do usuário que foi solicitado na busca por repositórios.


var nomeUsuario = document.querySelector("#nomeUsuario");
function trazerRepositorios() {
  axios
.get(`https://api.github.com/users/${nomeUsuario.value}/repos`**)
    .then((response) => {
      const repos = response.data;
      console.log(repos);
      var lista = document.querySelector("#repos");
      for (i in repos) {
        console.log(repos[i]);
        var elemento = document.createElement("li");
        elemento.innerHTML = JSON.stringify(repos[i].url);
        lista.appendChild(elemento);
      }
    })
    .catch((error) => console.error(error));**
}

Enter fullscreen mode Exit fullscreen mode

Vídeo completo criando a aplicação:

👇🏻
YOUTUBE

Resultado final

Image description

Image description

Link do Código

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.