How can I check the status value on a request using Xios?

Asked

Viewed 320 times

-1

index.html

<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/styles.css">
    <title>Exercício 2 e 3</title>
</head>

<body>
    <div id="main">
        <h1>Lista de repositórios do Github</h1>

        <input type="text" name="user" id="user" placeholder="Digite seu usuário do Github">

        <button class="add">Adicionar</button>
        <button class="clear">Limpar</button>

        <ul class="list"></ul>
    </div>


    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="js/main.js"></script>
</body>

</html>

main.js

const github_username = document.querySelector("input#user"); //input

// Botão adicionar
const btAdd = document
  .querySelector("button.add")
  .addEventListener("click", () => {
    console.log(axios.request.status);

    axios
      .get(`https://api.github.com/users/${github_username.value}/repos`)

      .then(response => {
        // while (axios.status == 102) {
        //   console.log("Request ainda não concluída");
        // }

        // Verifica se está inserindo os mesmo repositórios mais de uma vez (mesmo usuário)
        // if (
        //   linkAttribute.value == response.data[i].html_url ||
        //   linkElement.textContent == response.data[i].name
        // ) {
        //   alert(
        //     "ERRO! \nTentativa de exibição dos repositórios do mesmo usuário anterior"
        //   );
        //   clearInput();
        //   clearLines();
        // }

        // Percorre o vetor com as informações sobre os repositórios vindo do response
        for (var i = 0; i < response.data.length; i++) {
          var itemElement = document.createElement("li"); //criação de uma linha
          var linkElement = document.createElement("a"); //link
          var linkAttribute = document.createAttribute("href"); //href

          linkAttribute.value = response.data[i].html_url; //atribui a URL dos repositorios a cada href
          linkElement.setAttributeNode(linkAttribute); //coloca os href dentro do link
          linkElement.textContent = response.data[i].name; //Pega os nomes dos repositórios e coloca no nó de texto do link ao lado do href

          document.querySelector("ul.list").appendChild(itemElement); //coloca as linhas na ul

          itemElement.appendChild(linkElement); //coloca os links nas linhas
        }
      })

      .catch(error => {
        alert(
          `Erro na requisição! \nUsuário ${github_username.value} não encontrado!`
        );
        // console.log("Erro na requisição");

        clearInput();
      });
  });

// Botão limpar
const btClear = document
  .querySelector("button.clear")
  .addEventListener("click", () => {
    let lines = document.querySelector("li");

    // Se as linhas existem, são apagadas
    if (lines) {
      clearLines();
    } else {
      alert("Nenhuma linha encontrada para ser apagada");
    }

    // Verifica se o input está vazio
    if (github_username.value === "") {
      alert("Nenhum usuário a ser apagado do input");
    } else {
      clearInput();
    }
  });

// Limpa o input e coloca o foco nele
function clearInput() {
  github_username.value = "";
  github_username.focus();
}

// Limpa as linhas em que estão os repositórios
function clearLines() {
  let list = document.querySelector("ul.list");

  // Enquanto a ul tiver alguma li (filha de ul)
  while (list.firstChild) {
    list.removeChild(list.firstChild);
  }
}
javascript axios requisition

  • Status comes in Sponse: response.status.. that’s what I wanted?

  • @Sam I believe so. I want to show a message on screen while the request is taking place.

  • 1

    Just show the message when the click function is triggered and when you enter the .then Axios (meaning the request has been completed) you remove the message.

1 answer

1

You can consult the Axios documentation for this information. But it’s very simple:

const github_username = 'github';

axios.get(`https://api.github.com/users/${github_username.value}/repos`)
  .then(response => {
    console.log(response.status);
  })
  .catch(error => {});
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>

Browser other questions tagged javascript axios requisition

You are not signed in. Login or sign up in order to post.