0

Olá,

Fiz uma pequena função chamada de makeRequest, que, recebendo uma URL como parâmetro, faz uma requisição GET simples para a URL utilizando-se do método FETCH.

Estou usando um simples endpoint do github, onde minha requisição está chegando normalmente, e retornando os dados solicitados em formato de JSON.

Porém, coloquei essa lógica dentro do método makeRequest, e ao retornar estes dados da função, ele está vindo undefined.

Gostaria de saber o que estou fazendo de errado, segue abaixo o código:

var url = "https://api.github.com/users/random-user";

var infoAPI = makeRequest(url);
console.log(infoAPI); //retorna undefined

function makeRequest(url) {
    fetch(url)             
        .then(
            function(response) {
                if (response.status == 404) {                    
                    console.log("User not found, code "+response.status);                    
                    return;
                }                                
                response.json().then(function(data){                    
                    console.log(data); //exibe as informações do usuário
                    return data;                                                            
                });
            }
        )
        .catch(function(error){
            console.log(error);
        })            
};
0

1 Resposta 1

1

O que está acontecendo em seu código e que você está logando antes mesmo de ter o resultado da Promise.

var url = "https://api.github.com/users/random-user";

function makeRequest(url) {
  fetch(url)
    .then(
      function (response) {
        if (response.status == 404) {
          console.log("User not found, code " + response.status);
          return;
        }
        response.json().then(function (data) {
          console.log(data); //exibe as informações do usuário
          return data;
        });
      }
    )
    .catch(function (error) {
      console.log(error);
    })
};


var infoAPI = makeRequest(url);
console.log(infoAPI); //retorna undefined
<!-- begin snippet: js hide: false console: true babel: false -->

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

2
  • Acho que entendi, isso está acontecendo porque a função é assíncrona, certo? Portanto antes da função retornar algum resultado, o que está atribuído na variável infoAPI já é exibido no console. Teria alguma maneira onde seria possível atribuir estes dados dentro de uma variável? Pois a minha ideia era de fazer um método somente para realizar os fetchs, e chamar o mesmo várias vezes passando outros endpoints (URL)
    – Carltee
    Commented 2/03/2020 às 14:57
  • Sua função já é genérica, então se você estiver utilizando a sintaxe es6 você pode exportar utilizando palavras reservas como export ou export default e passar o parâmetro e resolver a promise por exemplo: const obterResultado = async () => { var result = await makeRequest(url); console.log(result) }; ou com makeRequest(url).then, etc. Commented 2/03/2020 às 16:12

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 .