Write to console after async loop

Question

I'm trying to do async loop, where I do something and after it ends, I write to the console. It's look like that:

const http = require('http');

async function load(link)
{
    try{
        http.get(link, response => console.log(`File: ${link}`));
    }catch(e){
        console.log('error');
    }
}

async function loop(arrayOfLinks)
{
    for(let link of arrayOfLinks)
        load(link);
}

module.exports = (arrayOfLinks) => {
    (async () => {
        await loop(arrayOfLinks);
        console.log('Files: '+arrayOfLinks.length);
    })();
}

But, what I have:

Files: 3
File: http://localhost:8000/1.jpg
File: http://localhost:8000/2.jpg
File: http://localhost:8000/3.jpg

And what I want:

File: http://localhost:8000/1.jpg
File: http://localhost:8000/2.jpg
File: http://localhost:8000/3.jpg
Files: 3

Questions:

1. Why await operator doesn't block the next step?
2. How can I solve this?

Thanks

Answer 1

You need to make sure load function returns Promise. http.get by itself is not going to return it so you want to wrap it (or use promise based HTTP library, like fetch, etc).

Simple promise wrapper could look like this:

async function load(link) {
  try {
    return new Promise((resolve, reject) => {
      http.get(link, resolve).on('error', reject)
    })
    .then(response => console.log(`File: ${link}`))
  } catch (e) {
    console.log('error', e.message);
  }
}

async function loop(arrayOfLinks) {
  for (let link of arrayOfLinks)
    await load(link);
}

You also need to use await load(link) in loop.