Потребление API — это доступ к информации и услугам из другой системы, которая позволяет такую интеграцию, без необходимости для приложения, потребляющего API, знать детали программной реализации.
Для обеспечения связи между приложением и API мы будем использовать AXIOS, который будет выполнять запросы к API, которые будут потребляться и приводить данные приложения в HTML.
Мы будем использовать Github API и представлять список репозиториев динамически в HTML.
1-Й ШАГ
Добавьте ссылку AXIOS cdn в ваш HTML-документ, она будет отвечать за возможность использования AXIOS в приложении
<!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-Й ЭТАП
Создайте файл Javascript и добавьте путь к этому файлу в HTML с помощью тега ‘script’. ПРИМЕЧАНИЕ: Вы должны вставить этот тег с путем javascript в последнюю строку тега ‘body’ в 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
В файле JavaScript создайте функцию, которая будет вызывать axios для выполнения запросов API в соответствии с именем пользователя, которое было запрошено в поиске хранилища.
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));**
}
Полное видео создания приложения:
👇🏻
YOUTUBE
Окончательный результат
Кодовая ссылка