Why is my function returning Promise { }

Question

As my first real MERN project, I'm building a message board. I'm currently working on a node route to request the board names with their associated post count but I've hit an issue. Instead of getting the values that I need, I'm recieving info telling me there is a promise pending, which seems odd as I'm using async/await. Here's the function:

exports.postsPerBoard = async (req, res) => {
  try {
    const boards = await Board.find();

    const postCount = boards.map(async (boardI) => {
      const posts = await Post.find({ board: boardI.slug });
      return [boardI.slug, posts.length];
    });
    console.log(postCount);
    res.send(postCount);
  } catch (err) {
    console.error(err.message);
    res.status(500).send('server error');
  }
};

and here is the result of the console log:

[0] [
[0]   Promise { <pending> },
[0]   Promise { <pending> },
[0]   Promise { <pending> },
[0]   Promise { <pending> },
[0]   Promise { <pending> }
[0] ]

When you call an async function without `await` it returns a promise. — Barmar, Sep 16 '20 at 23:48
`boards.map(async ...)` is calling an the async function without using `await`. — Barmar, Sep 16 '20 at 23:50
@Barmar - boards.map is not async - it returns the same Array with or without `await` — Jaromanda X, Sep 16 '20 at 23:51
Calling that returns a promise, and `boards.map()` returns the array of those promises. — Barmar, Sep 16 '20 at 23:52
@Barmar is right, `async (boardI) => {...}` is async so you need to wait — Andrew Gray, Sep 16 '20 at 23:59

score 5 · Accepted Answer · answered Sep 16 '20 at 23:51

5

const postCount = boards.map(async (boardI) => {
  const posts = await Post.find({ board: boardI.slug });
  return [boardI.slug, posts.length];
});

Since this is an async function, it will return a promise. map calls the function for each element of the array, gets the promises they return, and creates a new array containing those promises.

If you would like to wait for that array of promises to each finish, use Promise.all to combine them into a single promise, and then await the result.

const promises = boards.map(async (boardI) => {
  const posts = await Post.find({ board: boardI.slug });
  return [boardI.slug, posts.length];
});
const postCount = await Promise.all(promises);
console.log(postCount);

answered Sep 16 '20 at 23:51

Nicholas Tower

72,740
7
86
98

Brilliant! Thank you Nicholas – harry young Sep 16 '20 at 23:56
Why do I need to await them all, though? Didn't I already do that inside the map function? (Thank you, it's working!) – harry young Sep 17 '20 at 00:04
Async functions return promises, and they do so synchronously. `map` doesn't check types: whatever is returned, that's what goes into the new array. So since promises are returned, promises go in the array. As for the `await` inside the function, that will delay when the returned promise resolves, but doesn't change the fact that a promise was (past tense) returned. – Nicholas Tower Sep 17 '20 at 00:41

Why is my function returning Promise { }

1 Answers1

Linked

Related