5

Estou começando no JavaScript e estou com a seguinte dificuldade: necessito pegar uma variável e acessa-la em outra função.

Já criei uma variável sem especificar nada tornando-a global, mas não deu certo por aqui, utilizando o console retorna como undefined.

Preciso pegar o que retorna de axios.get() seja o .then ou .catch e acessar ela em btnElement.onclick = function ().

var inputElement = document.querySelector('input');
var btnElement = document.querySelector('button');
var listElement = document.querySelector('.div lista');


btnElement.onclick = function () {
    var listItemElement = document.createElement('ul');

    pegarRepositorio();

    // QUERO USAR O "RESPONSE" AQUI

};


function pegarRepositorio() {

    var inputValue = inputElement.value;

    axios.get(`https://api.github.com/users/${inputValue}/repos`)
        .then(function (response) {
            console.log(response);
        })
        .catch(function (error) {
            console.warn('Erro 404 - Usuário não encontrado');
        });
};

2 Respostas 2

9

Você pode fazer sua requisição de forma assincrona. Quando uma função assíncrona é chamada, ela retorna uma Promise.
Uma função assíncrona é diferente de uma função de síncrona, pois uma função assíncrona não bloqueia o processamento portanto função assíncrona pode conter uma expressão await, que pausa a execução da função assíncrona e espera pela resolução da Promise passada, e depois retoma a execução retornando o valor resolvido.

No caso eu testei com o valor id de usuário mojombo que foi o primeiro valor obtido na consulta https://api.github.com/users :

let inputElement = document.querySelector('input');
let btnElement = document.querySelector('button');


btnElement.onclick = async function() {

  //Pausa a execucão até pegarRepositorio() retornar um valor ou falhar.
  let repositorio = await pegarRepositorio();
  //Verifica se houve erro
  if (repositorio.error == null) {
    //Caso não houver erros
    console.log(repositorio["data"]);
  } else {
    //Caso houver erros
    console.error(repositorio.error);
  }

};


async function pegarRepositorio() {
  let inputValue = inputElement.value;
  let d = {};
  try {
    //Pausa a execução até axios.get() retornar um valor ou falhar
    d = await axios.get(`https://api.github.com/users/${inputValue}/repos`, {
      timeout: 3000
    });
  } catch (err) {
    d.error = err;
  }
  return d;
};
<input type="text" value="mojombo">
<button>Clique</button>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

2
  • Boa tarde Augusto, show, deu certo por aqui. Apenas uma questão, preciso retornar na tela, caso o usuario seja digitado errado, deve ser retornado o erro 404... por isso o .then/.catch, como faço para manter eles? Commented 17/04/2020 às 19:57
  • 1
    @RafaelSimionato fiz uma edição na resposta e veja se atende suas expectativas. Commented 17/04/2020 às 20:32
-2

Você pode fazer Usando Return!
Fazendo assim a variável response terá o que o axios.get() retornar

btnElement.onclick = function () {
    var listItemElement = document.createElement('ul');

    let response = pegarRepositorio();

};


function pegarRepositorio() {

    var inputValue = inputElement.value;

    return ( 
        axios.get(`https://api.github.com/users/${inputValue}/repos`)
        .then(function (response) {
            console.log(response);
        })
        .catch(function (error) {
            console.warn('Erro 404 - Usuário não encontrado');
        });
    )
};

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 .