通过在循环上使用await等待循环结束

Question

Synchronicity in js loops is still driving me up the wall.

What I want to do is fairly simple

async doAllTheThings(data, array) {
    await array.forEach(entry => {
        let val = //some algorithm using entry keys
        let subVal = someFunc(/*more entry keys*/)
        data[entry.Namekey] = `${val}/${subVal}`;
    });
    return data; //after data is modified
}

But I can't tell if that's actually safe or not. I simply don't like the simple loop pattern

for (i=0; i<arrayLength; i++) {
    //do things
    if (i === arrayLength-1) {
        return
    }
}

I wanted a better way to do it, but I can't tell if what I'm trying is working safely or not, or I simply haven't hit a data pattern that will trigger the race condition.

Or perhaps I'm overthinking it. The algorithm in the array consists solely of some MATH and assignment statements...and a small function call that itself also consists solely of more MATH and assignment statements. Those are supposedly fully synchronous across the board. But loops are weird sometimes.

The Question

Can you use await in that manner, outside the loop itself, to trigger the code to wait for the loop to complete? Or is the only safe way to accomplish this the older manner of simply checking where you are in the loop, and not returning until you hit the end, manually.

Answer 1

One of the best ways to handle async and loops is to put then on a promise and wait for Promise.all remember that await returns a Promise so you can do:

async function doAllTheThings(array) {
    const promises = []
    array.forEach((entry, index) => {
        promises.push(new Promise((resolve) => {
            setTimeout(() => resolve(entry + 1), 200 )
        }))
    });
    return Promise.all(promises)
}

async function main () {

    const arrayPlus1 = await doAllTheThings([1,2,3,4,5])
    console.log(arrayPlus1.join(', '))
}
main().then(() => {
    console.log('Done the async')
}).catch((err) => console.log(err))

Another option is to use generators but they are a little bit more complex so if you can just save your promises and wait for then that is an easier approach.

About the question at the end:

Can you use await in that manner, outside the loop itself, to trigger the code to wait for the loop to complete? Or is the only safe way to accomplish this the older manner of simply checking where you are in the loop, and not returning until you hit the end, manually.

All javascript loops are synchronous so the next line will wait for the loop to execute.

If you need to do some async code in loop a good approach is the promise approach above.

Another approach for async loops specially if you have to "pause" or get info from outside the loop is the iterator/generator approach.