Value undefined returned from fetch (promise)

Question

I think i'm not understanding promises correctly. What I understand is that fetch() returns a promise, I try to use the .then() to return the value in the promise, but i always get undefined. What additionally confuses me is that I can console.log() and it shows data, but when I try to use it elsewhere it returns undefined. What am I doing wrong here?

var getData = function(){

    var getRaceData = function()
    {
        fetch('http://ergast.com/api/f1/2008.json')
        .then(function(response) {
            response.json().then(function(data) {
                var raceSeason = data.MRData.RaceTable; 
                var raceData = raceSeason.Races;
                console.log(raceData);
                // Not returning racedata here, always get undefined
                return raceData;
            });
            }
        )
        .catch(function(err) {
            return;
        });
    }


}

`getRaceData` has no return statement so it will always return `undefined`. The functions you pass to `then` and `catch` are *different functions*. — Quentin, Mar 21 '20 at 18:30

T.J. Crowder · Accepted Answer · 2020-03-21T18:49:04.957

You need to return the result of calling response.json().then(...). Typically you'd do that by chaining on the first then's result rather than nesting (nesting has its uses, but probably not here). You also need to return the overall chain (assuming the data is supposed to leave getRaceData):

var getData = function(){

    var getRaceData = function()
    {
        return fetch('http://ergast.com/api/f1/2008.json')
        .then(function(response) {
            return response.json();
        }).then(function(data) {
            var raceSeason = data.MRData.RaceTable; 
            var raceData = raceSeason.Races;
            console.log(raceData);
            return raceData;
        })
        .catch(function(err) {
            return;
        });
    }
}

A couple of other notes, though:

You're not checking for HTTP errors. This is a footgun in the fetch API, it only rejects on network errors, not HTTP errors. Instead, you have to add a check.
Ideally, you'd report or otherwise handle the rejection rather than letting it fail silently. :-)
The code in getData only creates a function, it doesn't call it. But I assume you're calling it in code you haven't shown.

So:

var getData = function(){
    var getRaceData = function()
    {
        fetch('http://ergast.com/api/f1/2008.json')
        .then(function(response) {
            if (!response.ok) {
                throw new Error("HTTP error " + response.status);
            }
            return response.json();
        }).then(function(data) {
            var raceSeason = data.MRData.RaceTable; 
            var raceData = raceSeason.Races;
            console.log(raceData);
            return raceData;
        })
        .catch(function(err) {
            // ...report/handle the error...
        });
    };
    // Presumbly use `getRaceData` here; the code above only *defines* it.
};

`getRaceData` has no `return` statement. Only the `then` callbacks do. — Quentin, Mar 21 '20 at 18:29
@Quentin - Thanks, good eye. For some reason I thought it was being used inline, but then the inner `return raceData` wouldn't be neded. — T.J. Crowder, Mar 21 '20 at 18:48

Value undefined returned from fetch (promise)

1 Answers1