0

I am trying to retrieve JSON from a server as an initial state. But it looks like the function doesn't wait for the response.

I looked at different Stackoverflow posts like How to return return from a promise callback with fetch? but the answers I found didn't seem to help.

// Get the best initial state available
// 1. Check for local storage
// 2. Use hardcoded state with the test value from the server.

export function getInitialState() {
    if (localStorage.getItem('Backup') != undefined) {
        return returnValue = Map(JSON.parse(localStorage.getItem('Backup')))
    } else {
        var returnValue = initialState
        const GetJSON = (url) => {
            let myHeaders = new Headers();
            let options = {
                method: 'GET',
                headers: myHeaders,
                mode: 'cors'
            };
            return fetch(url, options).then(response => response.json());
        };
        GetJSON('https://example.com/api/v1/endpoint/valid/').then(result => {
            // Console.log gives a good result
            console.log(result)
            // The return is undefined
            return returnValue.setIn(['test'], result)
        });
    }    
}

In this case, I receive an undefined while I expect a returnValue JSON where the test property is updated from the server.

So I really want the function getInitialState() to return the state. And to do this it needs to wait for the fetch to finish. I also tried to place return before the GetJSON but this had no effect.

Oke, so I just tried the following:

GetJSON('https://example.com/api/v1/endpoint/valid/').then(result => {
    console.log('aaa')
    console.log(result)
    localstorage.setItem('init', result)
    console.log('bbb')
}).then(result => {
    console.log('done')
});

This returns aaa and result. But the localStorage is never set, and the bbb and done are never shown.

Thijs
  • 715
  • 1
  • 5
  • 10
  • 3
    `getInitialState` doesn't `return` the promise that `GetJSON(…).then(…)` creates – Bergi Jan 27 '19 at 12:52
  • 1
    Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – connexo Jan 27 '19 at 12:55
  • Your anonymous inner `then` handler function returns something. `getInitialState` does not. – connexo Jan 27 '19 at 12:56
  • I tried to place return before GetJSON but that doesn't work either. – Thijs Jan 27 '19 at 12:58
  • @Thijs What do you mean by "doesn't work", what error are you getting now? Notice that `getInitialState()` can never return the state, it can at best return a promise for the state. – Bergi Jan 27 '19 at 13:58
  • Right now I get undefined, but how do I get the state? – Thijs Jan 27 '19 at 14:09
  • What does `returnValue.setIn(['test'], result)` return? – Bergi Jan 27 '19 at 15:28
  • Not related but doesn't `Map(JSON.parse(localStorage.getItem('Backup')))` should have a `new` operator before it ? – OB Kenobi Jan 27 '19 at 15:53
  • @Bergi this probably works, but I can't see it because it looks like the return value has already been set as undefined when this line is called. – Thijs Jan 27 '19 at 16:28
  • @OBFullStackKenobi Your probably right, I will change that :) – Thijs Jan 27 '19 at 16:28
  • Yes, the function will have exited and hopefully returned a promise for that value. – Bergi Jan 27 '19 at 16:30

0 Answers0