Sequential while mapping an array with promise in javascript

Question

I had to ask since I cannot find a decent way to solve it. I have follow tutorial from How to Resolve JavaScript Promises Sequentially (one by one) but still it cannot working on my situation after I alter it.

I have called a SQLite query to get data and get an array of data as response. Then I call the a function to start waiting the whole other process until this subprocess complete.

Sample resp: [{"TSTaskID": 1638938895}, {"TSTaskID": 1638945283}]

async function getUnsyncRecordFromLocal() {
   /// ... and the rest of the code send query to SQLite
   callTasks(resp);
}

  const callTasks = async (response) => {
    const allPromise = Promise.all(response.map(async (_item) => {
      task1(_item)
        .then((resp1) => task2(resp1))
        .then((resp2) => task3(resp2))
        .catch(console.error);
    }))

    const lists = await allPromise;

  }
  const task1 = async (TSTaskID) => {
    return new Promise((resolve, reject) => {
      console.log('task1 done.', TSTaskID);
      resolve(TSTaskID)
    })
    /** implementation */
  };

  const task2 = async (TSTaskID) => {
    return new Promise((resolve, reject) => {
      console.log('task2 done.', TSTaskID);
      resolve(TSTaskID)
    })
    /** implementation */
  };

  const task3 = async (TSTaskID) => {
    return new Promise((resolve, reject) => {
      console.log('task3 done.', TSTaskID);
      resolve(TSTaskID);
    })
    /** implementation */
  };

The log when doing this way

 LOG  task1 done. 1638938895
 LOG  task1 done. 1638945283
 LOG  task2 done. 1638938895
 LOG  task2 done. 1638945283
 LOG  task3 done. 1638938895
 LOG  task3 done. 1638945283

What I want it to look

 LOG  task1 done. 1638938895
 LOG  task2 done. 1638938895
 LOG  task3 done. 1638938895
 LOG  task1 done. 1638945283
 LOG  task2 done. 1638945283
 LOG  task3 done. 1638945283

I have try several way by using async function but the task still not complete in sequence. Like task 1, 2, 3 for same number, and next task with same number. Because I need to check with server database and the update the local SQLite table. So, it need to wait one to finish before continue with next.

Shaegi · Accepted Answer · 2021-12-08 13:29:48Z

2

Both initial Promises of task1 will be fired when mapping. You need to wait for the first to be done before even starting the second. e.g.

const callTasks = async (response) => {
    const result = []
    for(let i = 0; i < response.length; i++){
        const current = response[i]
        try {
            const result1 = await task1()
            const result2 = await task2(result1)
            const result3 = await task3(result2)
            result.push(result3)
        } catch(e) {
            // catch here
        }
    }
    return result
}

edited Dec 8, 2021 at 13:29

answered Dec 8, 2021 at 9:21

Shaegi

2362 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Luiey Over a year ago

First time seeing reversing like this. And if I got different parameter to pass based from task, how to make it by using your solution?

Shaegi Over a year ago

I edited the post, maybe its more clear how results will be passed along. You can pass whatever you want in the tasks by args. Await will be evaluated from inside out.

Collectives™ on Stack Overflow

Sequential while mapping an array with promise in javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related