Fetch function in Javascript returns Undefined

Question

Hello,

I did a little function called makeRequest, which, by receiving a URL as a parameter, makes a simple GET request to the URL using the FETCH method.

I’m using a simple github endpoint, where my request is coming in normally, and returning the requested data in JSON format.

However, I put this logic within the method makeRequest, and when returning this function data, it is coming Undefined.

I wonder what I’m doing wrong, follows below the code:

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);
        })            
};

Answer 1

What is happening in your code and what you are logging in before you even have the Promise result.

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">