Struggling with asynchronous JavaScript code

Question

I'm trying to get this function to asynchronously call an API and return the response's JSON. However, the function returns nothing, before the API call has returned and populated res.

I'm confused about the proper usage of asynchronous JavaScript in this use case.

From my understanding, once async has been declared in a function, then the code will pause whenever it hits an await until the await has returned a promise. But that obviously isn't the case. What am I missing?

        let queryApi = async (query) => {
            const url = "http://localhost:3000/test";
            const response = await fetch(url)

            const res = await response.json();
            return res;
        }

Thanks friends!

Try to declare your res variable outside the async function. — Abdullah Mohammad Motiullah
– Abdullah Mohammad Motiullah, Commented Mar 16, 2021 at 4:08
Are you awaiting at the call site? I.e. const result = await queryApi(query) versus const result = queryApi(query) — kingkupps
– kingkupps, Commented Mar 16, 2021 at 4:20
I'm fairly sure the problem is stemming from an improper use of fetch(). Fetch returns a promise, which you can't just call .json() on. — Liftoff
– Liftoff, Commented Mar 16, 2021 at 4:22

quicVO · Accepted Answer · 2021-03-16 04:11:43Z

5

Yes, that is how Promises work. You must call asynchronous code from an asynchronous setting or a top-level module. So let's say you have the following code (adjusted).

let queryApi = async (query) => {
    const response = await fetch(query);
    const res = await response.json();
    return res;
}

You can call it like so:

let result = await queryApi('https://www.example.com');
console.log(result);

It must be inside an asynchronous function OR in a <script type='module'></script>.

answered Mar 16, 2021 at 4:11

quicVO

8886 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Darkhan · Accepted Answer · 2021-03-16 04:11:56Z

1

Here you have some problems with your braces. Actually you need something like this:

        const queryApi = async (query) => {
            const response = await fetch(query);
            const res = await response.json();
            return res;
        }

answered Mar 16, 2021 at 4:11

Darkhan

212 bronze badges

1 Comment

Batman Over a year ago

Yeah I thought that too but then thought typos?

Collectives™ on Stack Overflow

Struggling with asynchronous JavaScript code

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related