DEV Community

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

Posted on

7 1

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

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs