Async / Await JavaScript issue

Question

shortly, I was trying to simulate async / await behavior in JavaScript but getting not expected

const urls = ['api1', 'api2', 'api3']

async function start() {
  for (i = 0; i < urls.length; i++) {
    result = await getFromApi(urls[i])
    console.log(result)
  }
}

async function getFromApi(apiUrl) {
  return await new Promise((resolve, reject) => {
    resolve(apiUrl)
  }).then(apiUrl => apiUrl)
}

console.log('start ....')
start()
console.log('done ... ')

so the expected result should be

start ....
api1
api2
api3
done ...

but I am getting

start ....
done ... 
api1
api2
api3

same issue .. (async () => await start())();

ATSC
– ATSC

2020-04-15 20:05:02 +00:00
Commented Apr 15, 2020 at 20:05 — ATSC
– ATSC, Commented Apr 15, 2020 at 20:05

norbitrial · Accepted Answer · 2020-04-15 20:07:31Z

1

The function called start() needs be used with await. Also in the same time your code needs to be wrapped with async function.

Try as the following:

(async () => {
    const urls = ['api1', 'api2', 'api3']

    async function start() {
        for (i = 0; i < urls.length; i++) {
            result = await getFromApi(urls[i])
            console.log(result)
        }
    }

    async function getFromApi(apiUrl) {
        return await new Promise((resolve, reject) => {
            resolve(apiUrl)
        }).then(apiUrl => apiUrl)
    }

    console.log('start ....')
    await start()
    console.log('done ... ')
})();

I hope this helps!

answered Apr 15, 2020 at 20:07

norbitrial

15.2k10 gold badges39 silver badges66 bronze badges

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

5 Comments

ATSC Over a year ago

it does work fine, Thank You, but do you have any Explanation why is that needed ?? by the way I tried (async () => await start())(); didn't work, but yours did work

David Over a year ago

@ATSC: Your approach wrapped the await in an async function, but didn't await that function. This answer wraps the whole thing in an async function and uses await therein. The whole outer function isn't awaited, but it doesn't need to be in this example because nothing happens after it.

norbitrial Over a year ago

Technically await keyword is used to add in order to wait for a Promise. Read further here: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

ATSC Over a year ago

@David I tried this and worked fine (async () =>{ console.log('start ....'); await start() ` console.log('done ... ')` })(); But this didn't work,, (async () => await start())(); WHY ??!?

David Over a year ago

@ATSC: For the same reason this answer does. There is exactly one operation which occurs after the asynchronous operation, the second console log. It will only happen after the async operation if that operation is awaited. The non-working example wraps only the async operation in a function, but doesn't await that function. The working example wraps both operations in a function, and so doesn't need to await that function. Put another console log outside of the wrapping function to see the difference.

David · Accepted Answer · 2020-04-15 20:08:12Z

1

start() isn't being awaited. If this is at the top-level scope then you would probably use .then() on the returned Promise object. For example:

console.log('start ....');
start().then(() => {
    console.log('done ... ');
});

answered Apr 15, 2020 at 20:08

David

221k42 gold badges245 silver badges337 bronze badges

Collectives™ on Stack Overflow

Async / Await JavaScript issue

2 Answers 2

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Related