How can the map function be executed sequentially every second, using async functions, fetch API, and promises, without running in parallel?

Question

How can the map function be executed sequentially every second, using async functions, fetch API, and promises, without running in parallel?

I am facing an issue with my map function, as it needs to fetch data from an online API that only allows one request per second. I attempted to solve this problem by implementing the following code:

const sleep = (ms: number) => {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
};

const promises = projectData.map(async (project, index) => {
        return await getAddress(asdf)
          .then((nominatimData) => {
        // ....perform some actions...
          })
          .catch(async (e) => {
            console.log("failed", e);
            return await sleep(2000).then(() => {
              console.log("retrying... ")
              return getAddress(asdf);
            });
          });
    });

    await Promise.allSettled(promises);

    console.log("Project Data", projectData); //fires before all getAddress() are retrieved.. :(

I am encountering two challenges that I cannot resolve:

It seems like the map() function is executing in parallel (is this accurate?), which is not ideal for me because I need it to run sequentially, with a one-second delay between requests.
My sleep function does not appear to be functioning correctly. The console log output is disorganized and simultaneous.

What would be the best approach to ensure that this code executes once every second? Is there a better way to handle retrying "getAddress" if it fails?

Thank you for your assistance!

typescript promise fetch nominatim

Answer 1

Answer №1

In response to your query:

Indeed, the map function does not wait for the Promise to complete before moving on to the next operation. However, you can address this issue by utilizing a for loop.
By using map to run the operations, your sleep function executes concurrently for every element in the array. While the logic is sound, there may be room for improvement in terms of methodology.

You have the option to employ a for loop that supports async/await functionality. Nonetheless, considering that you aim to await a server response, I would suggest implementing a custom cursor loop instead.

let cursor = 0;
const timeout = 1000;
const sleep = (ms) => {
    return new Promise((resolve) => {
        setTimeout(resolve, ms);
    });
};

const loop = async () => {
    // Stop if index goes out of bounds
    if (!projectData[cursor]) {
        return console.log('Done');
    }

    await getAddress(projectData[cursor]).then(async (nominatimData) => {
        // ....perform necessary actions...
        // Move on to the next element in the array
        cursor++;
        await loop();

    }).catch(async (e) => {
        console.log(`Failed, retrying in ${ timeout }ms`);
        await sleep(timeout);
        await loop(); // Retry the loop with the same cursor index
    });
};
await loop();

Answer 2

In response to your query:

Indeed, the map function does not wait for the Promise to complete before moving on to the next operation. However, you can address this issue by utilizing a for loop.
By using map to run the operations, your sleep function executes concurrently for every element in the array. While the logic is sound, there may be room for improvement in terms of methodology.

You have the option to employ a for loop that supports async/await functionality. Nonetheless, considering that you aim to await a server response, I would suggest implementing a custom cursor loop instead.

let cursor = 0;
const timeout = 1000;
const sleep = (ms) => {
    return new Promise((resolve) => {
        setTimeout(resolve, ms);
    });
};

const loop = async () => {
    // Stop if index goes out of bounds
    if (!projectData[cursor]) {
        return console.log('Done');
    }

    await getAddress(projectData[cursor]).then(async (nominatimData) => {
        // ....perform necessary actions...
        // Move on to the next element in the array
        cursor++;
        await loop();

    }).catch(async (e) => {
        console.log(`Failed, retrying in ${ timeout }ms`);
        await sleep(timeout);
        await loop(); // Retry the loop with the same cursor index
    });
};
await loop();

Answer 3

Answer №2

setTimeout() is a handy function that runs once, with a specified delay. On the flip side, setInterval() continuously executes its contents in a loop, at set intervals.

For more information, you can visit the documentation links here: setTimeout() and setInterval()

To automate fetching API data, consider using setInterval() to enclose your code snippet like this:

setInterval(() => {    
  your code here
}, 1000);

Feel free to adjust the interval time (1000ms or 1s) as needed.

Answer 4

setTimeout() is a handy function that runs once, with a specified delay. On the flip side, setInterval() continuously executes its contents in a loop, at set intervals.

For more information, you can visit the documentation links here: setTimeout() and setInterval()

To automate fetching API data, consider using setInterval() to enclose your code snippet like this:

setInterval(() => {    
  your code here
}, 1000);

Feel free to adjust the interval time (1000ms or 1s) as needed.

How can the map function be executed sequentially every second, using async functions, fetch API, and promises, without running in parallel?

Answer №1

Answer №2

Similar questions

A generic type in TypeScript that allows for partial types to be specified

Utilizing shared state in React components through props

Combining TypeScript into HTML resulted in an error: Uncaught ReferenceError clickbutton is not defined

Why is it that I am limited to running globally installed packages only?

Tips for identifying unnecessary async statements in TypeScript code?

How to transfer a parameter in Angular 2

Angular 2 partial static routing parameters with customizable features

TS7053: The element is implicitly assigned an 'any' type as the expression of type 'string' cannot be used to index the type '{ username: string; email: string; '

Manipulating Data in TypeScript: Creating a Mutated Copy of a List of Dictionaries

Different Angular 2 components are resolved by routes

The 'HTMLDivElement' type does not include the property 'prepend' in Typescript

How do I retrieve a specific svg element in Angular among multiple elements?

How to Send TypeScript Object Excluding the '_id' Field?

Querying Cloud Firestore with User ID

Utilizing TypeDoc to Directly Reference External Library Documentation

Error in creating object URL: `argument must be a Blob instance. Received an instance of Blob`

What is the method for including word boundaries in a regex constructor?

Can we securely retrieve nested properties from an object using an array of keys in TypeScript? Is there a method to accomplish this in a manner that is type-safe and easily combinable?

Ways to decrease the size of this item while maintaining its child components?

Can you explain the execution process of this Http.post method and provide details about the code path it follows