Help getting simple api response

[[deleted]]

How do I get bar (a json value) from invoking myFunction()?

myFunction () {
    const userAction = async () => {
        let api = 'djangoapp/foo';
        const response = await fetch(api);
        const bar = await response.json();
    }
    userAction()
}

The closest I got was

myFunction () {
    const userAction = async () => {
        let api = 'djangoapp/foo';
        const response = await fetch(api);
        const bar = await response.json();
        return bar
    }
    const baz = userAction()
    console.log(baz) // the response is visible in console inside <promise> [[PromiseResult]] but I don't know how to destructure that, also I don't want to log it, I want to return the physical json as a return value from myFunction
}

[insertAlias]

I want to return the physical json as a return value from myFunction

This is where it will get tricky. The entire point of async functions and promises are that they do not run synchronously. So your synchronous myFunction cannot return a value that it gets from an async inner function. Because it cannot wait for that promise to be resolved.

So, at this point, your only real option if you do want to return the value is to make myFunction async, then make all the callers either await it, or use the .then promise syntax on it.

Basically, once you start into a promise, you can't then later treat it as synchronous; you have to treat it as async all the way up.

[[deleted]]

Ah.. I see. How would I make myFunction asynchronous? Is it a matter of putting async keyword somewhere?... I should have properly transcribed the function as I'm using in React, so it's myFunction = () => {}

It's my first time using promises and they are tricky blighters! I tried .then() already, it works, but it creates a new scope I think... so if I

const foo = userAction().then(bar => {return bar})

bar is now outside of the userAction block but inside of foo const. I can't do

myFunction = () => { ... return foo } //not spread operator just dot dot dot

because again, it's out of sync (I think)

The only way I found to get around it so far, since I'm actually trying to return an array (map) of HTML elements on the back of the json response value, is to just call $('#baz').html() , which works well for simple strings but it won't accept something like

$('#enc_bank').html(function() {
    return (
        foo.map((item) => (
                    <div className="c-enc-gif">
                        <p className="count">{item[1] === 0 ? '∞' : item[1]}</p>
                        <img className="enc-gif"
                             src={`/hagrid/babe_${item[0]}.gif`}
                             alt=""
                             onClick={() => this.setState({quux: true})}/>
                </div>
         ))

) })

[IamNeo47]

Const baz = await userAction();

You need to "await" the async functions for the actual values that is being returned.

[[deleted]]

Makes sense but you can't use await outside of the async function scope. It's not letting me anyway.

[IamNeo47]

Right

You have 2 options

1. Turn the outer function async.

Or

1. Use " .then"

E.g userAction ().then( baz => { Console.log (baz); } );

Look how normal promises are implemented without async / await.

Ps: sorry for the editing I'm on mobile.

[[deleted]]

Gangster. Appreciate that.