Como consumir API com JS Puro e Axios. (em 3 passos)
Tags: javascript, axios, api, tutorial
Published: 2022-08-13 00:10:07

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>
```
`</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>
```
`</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));**
}

```

 


## Vídeo completo criando a aplicação:
 👇🏻
[YOUTUBE](https://www.youtube.com/watch?v=WlMyLKJReFY&t=6s)

Resultado final
---
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gvdmqzrybebqhwjnxs3m.jpg)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3rumwzokxw7opa6pg0bf.jpg)

[Link do Código](https://github.com/Juliana-Felix/Repositorios-github)