如何在JavaScript中迭代多个异步等待函数并链接在一起？

Question

I'm new in JavaScript and Node.js. I have the following code:

  const populateSetup = async () => {
  token = await getToken();

  const promises = await constant.accounts.map(async (x) => {
    const accountId = await createAccountRequest(x.account);
    const peoid = await createPeopleRequests(x.people);
    const pid = await createProjectsRequests(x.project);

    return [accountId, pid, peoid];
  });

  const [accountId, pid, peoid] = await Promise.all(promises);
};

In the above, token is first fetched and is required to create account and then accountId returned is required to create people and projects. Let's say I have the following input:

    exports.accounts = [
  { account: this.testAccountFirst, project: this.projectOne, people: this.testUserOne },
  { account: this.testAccountSecond, project: this.projectTwo, people: this.testUserTwo },
];

After running the populateSetup() in node environment my result is (not the console output but the output of the populateSetup() :

testAccountFirst has 1 people -> testUserOne
testAccountSecond has 2 projects and 1 user -> projectOne, projectTwo, testUserTwo

expected result is:

testAccountFirst should have 1 project and 1 people -> projectOne, testUserOne
testAccountSecond should have 1 project and 1 people -> projectTwo, testUserTwo

The problem here is that the accountId of first account is not sent to the projectsRequest. I don't know how to resolve this. I have gone through this Stackoverflow question but still couldn't figure out.

Answer 1

I'm having a hard time understanding exactly what question you're asking, but .map() is not async savvy. That means that even though you declare the callback as async , .map() doesn't do anything with the promise that returns and thus it doesn't wait to start the 2nd iteration before the 1st iteration is done. Therefore, you end up running all the async operations from all the iterations of the loop in parallel and they can finish in any random order.

If you really want to run them sequentially, one after another, then switch your .map() to a for loop because a for loop will wait for an await in the first iteration of the loop before starting the 2nd iteration of the loop and so on...

Answer 2

return [accountId, pid, peoid]; is returning resolved promises, also, you wait one promise resolving after another. For example, if one resolving is 5 sec, then you need to wait 5+5+5=15 secs

But more of that, it is bad practice to use .map() with promises inside, because it is sync operator. In your case, I would use something like that:

const populateSetup = async () => {
  const token = await getToken();

  const [accountId, peoid, pid] =[
    createAccountRequest(x.account),
    createPeopleRequests(x.people),
    createProjectsRequests(x.project)
  ]

  return Promise.all([accountId, peoid,pid])
};

Here, You return promise, that can be used like this:

const [accountId, peoid,pid] = await populateSetup()

Promise.all() do promise execution simultaniosly and wait for all to be resolved, so it is 5 secs instead of 15