Rocktim Saikia

Posted on Nov 18, 2019

Async function behaves differently in loop [SOLVED]

#help #javascript

I have very basic async function going on here. my primary function "formatData" is formatting some data from an array "users" . which are basically some github usernames.

This function formats the data in this way :

[
  { name: 'rocktimsaikia', followers: 12 },
  { name: 'aholachek', followers: 90 },
  { name: 'benawad', followers: 30 }
]

Very basic . But the issue is to get the followers count i created another async function "getFollowers" which extracts the followers count with given argument which is the github user name that i am providing in formatData.

Here is my code :

const getFollowers = async name => {
  const data = await fetch(`https://api.github.com/users/${name}`);
  const { followers } = await data.json();
  return followers;
};

const formatData= async () => {
  const users = ["rocktimsaikia", "aholachek", "benawad"];
  const result = await users.map(async (user) => ({
      name: user,
      followers: await getFollowers(user)
   }));
  return result;
};

But the function formatData() returns everything with a promise. What am i missing here ? please help !

Top comments (6)

Bharath_Bheemireddy • Nov 18 '19

Try this one.



const formatData= async () => {
  const users = ["rocktimsaikia", "aholachek", "benawad"];
  let result = [];
  for(let i = 0; i < users.length; i++) {    
      let followers = await getFollowers(users[i]);
      result.push({
        name: users[i],
        followers: followers
      })
  }
  return result;
};

Rocktim Saikia • Nov 18 '19

That makes sense and works just fine. Thanks 🎉 but is there anyway to do it with map.

Bharath_Bheemireddy • Nov 18 '19

If you want to use with map, you have to wrap with Promise.all()



formatData= async () => {
  const users = ["rocktimsaikia", "aholachek", "benawad"];
  const result = Promise.all(users.map(async (user) => ({
      name: user,
      followers: await getFollowers(user)
   })));
  return result;
};

Brian Krygsman • Nov 18 '19

(and you might want to await that Promise.all())

Bharath_Bheemireddy • Nov 18 '19 • Edited

Promise.all() waits for all fulfillments (or the first rejection).
developer.mozilla.org/en-US/docs/W...

Brian Krygsman • Nov 18 '19

You're exactly right... and it does so by returning a Promise itself.

Since it returns a Promise, it's await-able in the context of an async function like the code here.

Depends on the expectations of the calling code of course, but if the calling code is expecting the value as opposed to the Promise, it might be worth considering an await

e.g.

//...
const result = await Promise.all(users.map(async (user) => ({
//...

DEV Community

Async function behaves differently in loop [SOLVED]

Top comments (6)

Read next

SSL Certificate Problem: Unable to Get Local Issuer Certificate – Causes and Solutions

Building a Customisable Carousel with Auto-Scroll, Infinite Loop, Pagination in React Native using Reanimated

Experiences and Caveats of Svelte 5 Migration

How to Create PDFs in React from JSON Data with jsPDF