How to fix Unexpected `await` inside a loop error

Question

Eslint gives me an error "Unexpected await inside a loop". I understand the problem, but can't find a way to fix the code.

I've read the eslint docs: https://eslint.org/docs/rules/no-await-in-loop When I wrap my loop in /* eslint-disable no-await-in-loop */ it fixes the error. However, that is not efficient, because every promise will wait for previous one to finish.

My promise results are not dependent on each other, so they could run concurrently. Am I correct? I'd be glad if anyone could show me how to fix my current code and use Promises

const resizeImages = async imagePaths => {
    try{

        // With the line bellow everything works as expected. But without it I get error
        /* eslint-disable no-await-in-loop */

        const results = [];

        for (const imagePath of imagePaths){
            const thumbDest = path.parse(imagePath).dir + '/resized' + path.basename(imagePath);
            let tempFilePath = path.join(os.tmpdir(), path.basename(imagePath));
            console.log("Image resizing in progress: " + imagePath);

            // File is downloaded to the firebase functions environment 
            await rootBucket.file(imagePath).download({
                destination: tempFilePath
            })
            // Uploading resized image back to the folder in firebase storage 
            await spawn('convert', [tempFilePath, '-resize', '900x900', tempFilePath]);
            // Uploading resized image back to the folder in firebase storage 
            const uploadedFile = await rootBucket.upload(tempFilePath, {
                destination: thumbDest,
                metadata: metadata
            })
            console.log("Resized img successfully saved in: " + thumbDest);
            console.log("Resized img mediaLink " + uploadedFile[0].metadata.mediaLink);

            results.push(uploadedFile[0].metadata.mediaLink);                        
        }

        /* eslint-enable no-await-in-loop */

        return resizedImages = results;
    }
    catch (err){
        return console.log("Function resizeImages error: " + err);
    }
}

That's part of a Google Firebase Cloud Function, where I try to create a thumbnail, reduce size of uploaded pictures and delete original ones.

Jonas Wilms · Accepted Answer · 2020-05-12T21:31:32.587

   const results = await Promise.all(imagePaths.map(async imagePath => {
     // this now runs concurrently ...
     return uploadedFile[0].metadata.mediaLink;
   }));

Note that this is "not an error". It's a warning that should help you improve your code. in this case the different items can be processed in parallel, and that's what the warning wants to tell you. There are situations were awaiting inside a loop makes totally sense though (e.g. if the processing needs to be done in order).

How to fix Unexpected `await` inside a loop error

1 Answers1