Как использовать API с помощью Pure JS и Axios (за 3 шага)

Потребление 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

Окончательный результат

Кодовая ссылка

Оцените статью
devanswers.ru
Добавить комментарий