3

Olá, sou iniciante em JavaScript e estava querendo criar um código onde escrevemos algo no input e ao clicar em um button chamaríamos uma Promise. Ela tentaria fazer uma requisição no site e retornaria o resultado ou uma mensagem de erro.
Estou fazendo requisições na api do git como teste onde em input é passado o nome de um usuário.
O problema é que eu não sei como ficaria a parte final. Se eu deixo ' = gitPromise() ' ele já estaria chamando a função e como o inputElement não está definido ainda, ele dá erro. Se eu tento alterar somente para ' = gitPromise ', não é possível utilizar o .then e .catch.
Grato desde já.
Segue o código:

var inputElement = document.querySelector('input');
var buttonElement = document.querySelector('button');

var gitPromise = function() {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://api.github.com/users/' +
    inputElement.value);
    xhr.send(null);

    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4) {
        if (xhr.status == 200) {
          resolve(JSON.parse(xhr.responseText));
        } else {
          reject('Erro na requisição');
        }
      }
    }
  });
}

buttonElement.onclick = gitPromise().then(function(response) {
  console.log(response);
})
.catch(function(error) {
  console.log(error);
});
<html>
    <head>
        <meta charset="utf-8">
        <title>Program Teste</title>
    </head>
    <body>
        <div id="teste">
            <input type="text" placeholder="Digite um texto aqui">
            <button>Adicionar</button>

        </div>
        <script src="program.js"></script>
    </body>
</html>

3
  • A sua dificuldade é como usar essa Promisse que tu codificou?
    – novic
    13/11/2019 às 12:19
  • Desculpe, talvez não tenha ficado muito claro. Eu reformulei a pergunta para melhor entendimento. 13/11/2019 às 13:09
  • @BetaTester, nesse esse caso, eu te aconselho a usar a API Fetch,que é uma API de requisição baseada em Promisse. developer.mozilla.org/pt-BR/docs/Web/API/Fetch_API/Using_Fetch
    – MarioAleo
    13/11/2019 às 17:55

1 Resposta 1

3

Olá @Beta Tester,

Sua implementação está errada no seguinte ponto:

buttonElement.onclick = gitPromise().then(function(response) {
  console.log(response);
})
.catch(function(error) {
  console.log(error);
});

Seu código deveria estar assim:

buttonElement.onclick = function(){
    gitPromise().then(function(response) {
      console.log(response);
   })
   .catch(function(error) {
      console.log(error);
   });
};

Dessa forma sua promise somente será executa quando o usuário clicar no botão em questão, da forma que vc havia escrito a promise irá executar assim que o codigo for lido pelo interpretador.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .