How to refactor for-loop async/await with Promise.all()?

Viewed 233

I'm trying to wrap my head around how to use Promise.all() in this code. I've read on articles that you can run async operations in parallel with Promise.all() to optimize for speed. Here's the current code in nested for-loops (bad):

type ListGroup = {
  listId: string
  groupIds: Array<string>
}

const listsAndGroups: Array<ListGroup> = []; // <-- put everything here

const { lists } = await mailchimp.get('/lists');
for (const list of lists) {
  const listObj = { listId: list.id };
  const { categories } = await mailchimp.get(
    `/lists/${list.id}/interest-categories`,
  );
  for (const category of categories) {
    const { interests } = await mailchimp.get(
      `/lists/${list.id}/interest-categories/${category.id}/interests`,
    );
    Object.defineProperty(listObj, 'groupIds', {
      value: interests.map((interest) => interest.id),
      enumerable: true,
    });
  }
  listsAndGroups.push(listObj);
}

Here's how I'm doing so far, I think I'm just running blindly here without really knowing what I'm doing:

const listsAndGroups: Array<ListGroup> = await getListsGroups(); // <-- put everything here

const getListsGroups = async () => {
  const { lists } = await mailchimp.get('/lists');
  const listGroups = lists.map((list) =>
    getCategories(list.id).then((groups) =>
      groups.map((group: Record<'groupIds', string>) => {
        return {
          listId: list.id,
          ...group,
        };
      }),
    ),
  );
  return Promise.all(listGroups);
};

const getCategories = async (listId: string) => {
  const { categories } = await mailchimp.get(
    `/lists/${listId}/interest-categories`,
  );
  const groups = categories.map((category) =>
    getInterests(listId, category.id),
  );
  return Promise.all(groups);
};

const getInterests = async (listId: string, categoryId: string) => {
  const { interests } = await mailchimp.get(
    `/lists/${listId}/interest-categories/${categoryId}/interests`,
  );
  return { groupIds: interests.map((interest) => interest.id) };
};
1 Answers

You could simplify your operation many way, Here is one:

type ListGroup = {
    listId: string
    groupIds: Array<string>
}

const listsAndGroups: Array<ListGroup> = []; // <-- put everything here
const { lists } = await mailchimp.get('/lists');

const pandingLists = lists.map(list =>
    mailchimp.get(`/lists/${list.id}/interest-categories`)
        .then(data => [data, { listId: list.id }])
);

for (const [{ categories }, listObj] of await Promise.all(pandingLists)) {
    const batch = categories.map(({ id }) =>
        mailchimp.get(`/lists/${listObj.listId}/interest-categories/${id}/interests`).then(interests => {
            Object.defineProperty(listObj, 'groupIds', {
                value: interests.map(({ id }) => id),
                enumerable: true,
            });
        }));

    await Promise.all(batch).then(() => listsAndGroups.push(listObj));
}
Related