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
Top comments (0)