How to use async await in for loops in javascript

Question

Basically I have a function which loops through all the elements from an api and pushes it to a array and then I return the array, but I am getting random of amount of elements everytime I run this function.

function getElements() {
    const url = "https://neelpatel05.pythonanywhere.com/element/atomicnumber?atomicnumber=";
    var elements = [];
    for(var i=1;i<=118;i++){
        newurl = url+i.toString();
        fetch(newurl)
        .then(response => response.json())
        .then(data => elements.push(data.symbol))
    }
    return elements;
}
console.log(getElements());

thanks in advance

Answer 1

You need to push entire promise to array and wait for them all to be resolved, so they will be resolved in parallel.

function getElements() {
    const url = "https://neelpatel05.pythonanywhere.com/element/atomicnumber?atomicnumber="
    const elements = []
    for(let i=1;i <= 118; i++){
        newurl = url + i // no need to 'i.toString()'
        elements.push( // push entire promise, not just "unpacked" response
          fetch(newurl)
            .then(response => response.json())
            .then(data => data.symbol)
        )
    }
    return Promise.all(elements)
}

getElements().then(elements => {
  console.log(elements.length)
  console.log(elements)
})

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

All the promises stored in elements will resolve together using Promise.all() method.

function getElements() {
    const url = "https://neelpatel05.pythonanywhere.com/element/atomicnumber?atomicnumber=";
    var elements = [];
    for(var i=1;i<=118;i++){
        newurl = url+i.toString();
        const res = fetch(newurl)
        .then(response => response.json());
        elements.push(res);
    }
    return Promise.all(elements);
}

Answer 3

Do not send so many request at a same time, send request in batches... Wait for 10 promise to finish, then next 10, then next 10, so on...

async function getElements() {
    const url = "https://neelpatel05.pythonanywhere.com/element/atomicnumber?atomicnumber=";
    let elements = [], pending = [];
    for(let i=1; i <= 118; i++){
        let p = fetch(url + i)
           .then(response => response.json())
           .then(data => elements.push(data.symbol))
           .catch(console.log);
         
        if (pending.push(p) > 10) {
            await Promise.all(pending);
            pending = [];
        }
    }
    return Promise.all(pending).then(() => elements);
}

// you cannot use async await in global scope, so I used 'then' here instead
getElements().then(elements => console.log(elements.length))

Answer 4

Ok, here you go then (I have limited the number of calls to 3, to not hammer this poor server too much)

const url = "https://neelpatel05.pythonanywhere.com/element/atomicnumber?atomicnumber=";

const getElements = async () => {
    let elements = [];

    for(var i=1;i<=3;i++){
        newurl = url+i.toString();

        const response = await fetch(newurl);
        const data = await response.json()
        
        elements.push(data.symbol)
    }
    return elements; // This is a Promise of array, not an array, because an async function always returns a Promise of something. So this can be awaited.
};

(async () => {
    console.log(await getElements());
})();

Answer 5

You can send all requests at once and store the promises in an array. Then you can wait for all promises to resolve:

async function getElements() {
    const url = "https://neelpatel05.pythonanywhere.com/element/atomicnumber?atomicnumber=";
    const promises = [];
    for(var i=1;i<=118;i++){
        newurl = url+i.toString();
        promises.push(fetch(newurl));
    }
    return Promise.all(promises);
}
(async () => {
    const responses = await getElements();
    responses.forEach(async response => console.log(await response.json()));
})();

A server should be able to handle 118 requests at once but you shouldn't send too many requests.

Be aware that in this minimal example the order of the console.log usually is not the order you sent the requests. forEach doesn't consider awaits.

Answer 6

The minimal rule of using async and await is that await can be used in an async function. So if you don't care about parallelism, you can just wrap your entire test into a bigger async function, add the keywords here and there, and that's it:

async function main() {                  // <-- wrapper
    async function getElements() {       // <-- became async, so can use await
        const url = "https://neelpatel05.pythonanywhere.com/element/atomicnumber?atomicnumber=";
        var elements = [];
        for(var i=1;i<=118;i++){
            newurl = url+i.toString();
            await fetch(newurl)          // <-- await request right in the loop
            .then(response => response.json())
            .then(data => elements.push(data.symbol))
        }
        return elements;
    }
    console.log(await getElements());    // <-- await the async function
}
main();                                  // <-- call wrapper
console.log("! results will come after this line !"); // memo about the test still being async