Executing a for loop concurrently by utilizing async/await promises

Question

Executing a for loop concurrently by utilizing async/await promises

In my current code, I am using a for loop structured like this:

async myFunc() {
    for (l of myList) {
        let res1 = await func1(l)
        if (res1 == undefined) continue

        let res2 = await func2(res1)
        if (res2 == undefined) continue

        if (res2 > 5) {
            ... and so on
        }
    }
}

The issue here is that func1 and func2 are network calls that return promises, and I don't want them to slow down my for loop while waiting for their completion. I'm open to processing myList[0] and myList[1] concurrently, and I don't have a preference for the order in which the list items are handled.

How can I modify my code to achieve this parallel processing?

javascript typescript async-await promise

Answer 1

Answer №1

To simplify the process, create a function that deals with handling one value at a time sequentially:

async function handleOneValue(value) {
    let result1 = await function1(value);
    if (result1 == undefined) {
        return /*insert appropriate value*/;
    }

    let result2 = await function2(result1);
    if (result2 == undefined) {
        return /*insert appropriate value*/;
    }

    if (result2 > 5) {
        // continue with more operations
    }
}

Next, utilize Promise.all along with map to initiate all these functions concurrently, obtaining the results in an array (if needed):

function executeFunctions() {
    return Promise.all(myList.map(handleOneValue)); // Assuming that 'handleOneValue' is designed to be called using 'map'
    // return Promise.all(myList.map(value => handleOneValue(value))); // Use this if the assumption shouldn't be made
}

If 'myList' is not always an array, transform it into an array using Array.from before employing map:

function executeFunctions() {
    return Promise.all(Array.from(myList).map(handleOneValue));
}

(Alternatively, use a 'for-of' loop to push values into an array.)

If you don't want a failure in handling one entry to halt the processing of others, consider using Promise.allSettled instead of Promise.all. (Note that all functions will still be initiated, and the only difference is in whether you receive successful results when one fails.)

Answer 2

To simplify the process, create a function that deals with handling one value at a time sequentially:

async function handleOneValue(value) {
    let result1 = await function1(value);
    if (result1 == undefined) {
        return /*insert appropriate value*/;
    }

    let result2 = await function2(result1);
    if (result2 == undefined) {
        return /*insert appropriate value*/;
    }

    if (result2 > 5) {
        // continue with more operations
    }
}

Next, utilize Promise.all along with map to initiate all these functions concurrently, obtaining the results in an array (if needed):

function executeFunctions() {
    return Promise.all(myList.map(handleOneValue)); // Assuming that 'handleOneValue' is designed to be called using 'map'
    // return Promise.all(myList.map(value => handleOneValue(value))); // Use this if the assumption shouldn't be made
}

If 'myList' is not always an array, transform it into an array using Array.from before employing map:

function executeFunctions() {
    return Promise.all(Array.from(myList).map(handleOneValue));
}

(Alternatively, use a 'for-of' loop to push values into an array.)

If you don't want a failure in handling one entry to halt the processing of others, consider using Promise.allSettled instead of Promise.all. (Note that all functions will still be initiated, and the only difference is in whether you receive successful results when one fails.)

Executing a for loop concurrently by utilizing async/await promises

Answer №1

Similar questions

Incorporate highcharts data into your Laravel project using the power of AJAX

When setting an attribute on load, Javascript may not properly apply the change to the attribute

Updating from webpack v1 to v2 using webpack-cli results in a tsx error during migration

The backbone module is experiencing formatting issues

Utilize AJAX in JavaScript file

Designing a visual showcase with interactive tab links for image selection

How can you transfer data from a jQuery function to a designated div element?

reversing an array does not have an effect

What is the best way to extract menu and submenu information from an array?

Is it possible to determine the duration of a JQuery AJAX call's execution?

Exploring TypeScript Module Importation and WebPack Integration

Issue: Module '../utils/composeObjs' not found after global installation of generator-stencil

Configuration of an MVC-based web application

Error thrown due to missing property in type '{}' when using TypeScript arrow function parameter

The logout confirmation message functionality in Laravel 8 is malfunctioning

Filtering options in a dropdown box with jQuery

Organize my JavaScript code by implementing a function

Creating diverse content for various tabs using JavaScript

Is subtyping causing issues in TypeScript's inheritance model?

Manage interfaces and structures