Fix the Async Promise Chain
MediumChallenge 3 of 20
Fix the Async Promise Chain
MediumThis code attempts to fetch user data, then their posts, and finally the comments on each post. However, it's not working correctly. Fix the promise chain to make it work as expected.
Challenge 3 of 20
50 XP
Community Solutions
AsyncPromisesAPIJavaScript
Exit ChallengeTest Cases
0/1 passingTest Case #1
Input: 1
Expected: { user: { id: 1, name: 'User 1' }, posts: [{ id: 1, title: 'Post 1', userId: 1, comments: [{ id: 1, text: 'Comment 1 on post 1' }, { id: 2, text: 'Comment 2 on post 1' }] }, { id: 2, title: 'Post 2', userId: 1, comments: [{ id: 1, text: 'Comment 1 on post 2' }, { id: 2, text: 'Comment 2 on post 2' }] }] }
Run tests to see results
solution.js
1
<span class="token keyword">async</span> <span class="token keyword">function</span> fetchUserData(userId) {
<span <span class="token keyword">class</span>=<span <span class="token keyword">class</span>="token string">"token comment"</span>>// Simulated API calls</span>
<span class="token keyword">const</span> fetchUser = () =>; Promise.resolve({ id: userId, name: &#<span <span class="token keyword">class</span>="token number">039</span>;User &#<span <span class="token keyword">class</span>="token number">039</span>; + userId });
<span class="token keyword">const</span> fetchPosts = (user) =>; Promise.resolve([
{ id: <span <span class="token keyword">class</span>="token number">1</span>, title: &#<span <span class="token keyword">class</span>="token number">039</span>;Post <span <span class="token keyword">class</span>="token number">1</span>&#<span <span class="token keyword">class</span>="token number">039</span>;, userId: user.id },
{ id: <span <span class="token keyword">class</span>="token number">2</span>, title: &#<span <span class="token keyword">class</span>="token number">039</span>;Post <span <span class="token keyword">class</span>="token number">2</span>&#<span <span class="token keyword">class</span>="token number">039</span>;, userId: user.id }
]);
<span class="token keyword">const</span> fetchComments = (post) =>; Promise.resolve([
{ id: <span <span class="token keyword">class</span>="token number">1</span>, text: &#<span <span class="token keyword">class</span>="token number">039</span>;Comment <span <span class="token keyword">class</span>="token number">1</span> on post &#<span <span class="token keyword">class</span>="token number">039</span>; + post.id },
{ id: <span <span class="token keyword">class</span>="token number">2</span>, text: &#<span <span class="token keyword">class</span>="token number">039</span>;Comment <span <span class="token keyword">class</span>="token number">2</span> on post &#<span <span class="token keyword">class</span>="token number">039</span>; + post.id }
]);
<span <span class="token keyword">class</span>=<span <span class="token keyword">class</span>="token string">"token comment"</span>>// Broken promise chain</span>
<span class="token keyword">const</span> user = <span class="token keyword">await</span> fetchUser();
<span class="token keyword">const</span> posts = fetchPosts(user);
<span class="token keyword">const</span> postsWithComments = posts.map(post =>; {
<span class="token keyword">const</span> comments = fetchComments(post);
post.comments = comments;
<span class="token keyword">return</span> post;
});
<span class="token keyword">return</span> {
user,
posts: postsWithComments
};
}Console
Run your code to see output here