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

Juliana Félix — Sat, 13 Aug 2022 00:10:07 +0000

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

Resultado final

Link do Código

DEV Community: Juliana Félix

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

Vídeo completo criando a aplicação:

Resultado final