how to properly use the async and await keywords within a map

Question

I have the following snippet of code

export const fetchPosts = () => async dispatch => {
  const res = await axios.get(`${url}/posts`, { headers: { ...headers } });
  console.log(res.data);
  let posts = res.data.map(p => (p.comments = fetchComments(p.id)));
  console.log(posts);
  dispatch({ type: FETCH_POSTS, payload: res.data });
};

export const fetchComments = id => async dispatch => {
  console.log(id)
  const res = await axios.get(`${url}/posts/${id}/comments'`, {
    headers: { ...headers }
  });
  console.log("id", id);
  return res.data;
};

when i console log the posts, i get 2 functions returned. what is the proper way in which i should call the fetch comments for this function to return me the desired value?

Why is `fetchComments` taking a `dispatch` parameter that it's never using? Drop that and you'd get two *promises* instead of functions - promises which you [then could await](https://stackoverflow.com/q/37576685/1048572) — Bergi, Oct 27 '17 at 10:07

score 3 · Accepted Answer · edited Oct 27 '17 at 11:38

3

Add this:

const postsResult = await Promise.all(posts)

edited Oct 27 '17 at 11:38

4b0

21,981
30
95
142

answered Oct 27 '17 at 10:31

Alexander Vitanov

4,074
2
19
22

Thanks for the reply, i still get the following error : `Unhandled Rejection (TypeError): res.data.map(...).then is not a function` – Strahinja Ajvaz Oct 27 '17 at 11:07
@strahinja sounds kind of like the thing you're trying to `.map` over isn't an array – Andrew Oct 28 '17 at 06:26
Yea I fixed it using the advice from @Bergi. – Strahinja Ajvaz Oct 29 '17 at 05:31

how to properly use the async and await keywords within a map

1 Answers1