Call an async function with javascript

Question

I am trying to call an async function but I am getting an error

getUsersList(db).then is not a function

this is my code

async function getUsersList(db) {
  const userCol = collection(db, 'Users');
  const userSnapshot = await getDocs(userCol);
  const tempUserList = userSnapshot.docs.map(doc => doc.data());
  return tempUserList;
}


function App() {

  const app = initializeApp(firebaseConfig);
  const db = getFirestore(app);
  const auth = getAuth(app);


  var currentUser = auth.currentUser;

  if(currentUser != null){
    getUsersList(db).then((value) => {
  console.log(value);

});

I also tried using await getUsersList but got the following error

Unexpected reserved word 'await'

you can't use await unless you're in an async function, and since I guess that App() is a react component, you wont be able to call it like this. — Emilien
– Emilien, Commented Dec 4, 2022 at 11:26
Maybe have a look at react-async and usefetch(). Or don't use await if you can. — Emilien
– Emilien, Commented Dec 4, 2022 at 11:28
such error response usually means that the function you have called .then upon isn't a promise. Have you checked the type returned by the getUserList function? — Davide Vitali
– Davide Vitali, Commented Dec 4, 2022 at 11:32
We should see the code of getDocs function in order to trace the problem — Islam Y-
– Islam Y-, Commented Dec 4, 2022 at 11:38

Emilien · Accepted Answer · 2022-12-04 12:01:18Z

0

So what I assume you're trying to do here const userSnapshot = await getDocs(userCol); is fetch some data that is then going to be used in your react component to render something (Maybe there's a fetch request in getDocs ?)

There is no return in your react component (but that's not what's causing your issue).
As it is it won't work using await since App() isn't an async function BUT you can't make it an async function since this is a standard react component.
What do you want to happen whilst waiting for the data to be fetched (= whilst your promise is pending) ? If you're happy to display nothing, why not just remove await before getDocs() ?

For more on this topic :

React: async and await not working with fetch

React Hooks: how to wait for the data to be fetched before rendering

answered Dec 4, 2022 at 12:01

Emilien

6391 gold badge8 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

Call an async function with javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related