JS Promise API：创建一个Promise循环并将结果合并到另一个对象中

Question

I am trying to understand Promise API.

Test Case: I am using three API's, from jsonplaceholder .

/user/{userId} #Returns a user
/posts?userId=1 #Returs list of posts by user
/comments?postId=1 #Returns list of comments for the post

I need to combine the output of all three API's into a structure like below.

var user = {
    'id' : "1",
    "name" : "Qwerty",
    "posts" : [
        {
            "id" : 1,
            "userid" : 1,
            "message" : "Hello",
            "comments" : [
                {
                    'id' : 1,
                    "postId" :1
                    "userid" : 2,
                    "message" : "Hi!"                   
                },
                {
                    'id' : 2,
                    "postId" :1
                    "userid" : 1,
                    "message" : "Lets meet at 7!"
                }
            ]
        }
    ]
}

The challenge I am facing is in merging comments to each post. Please Help. I mean I am not sure what to do.

Current Implementation.

var xyz = function (userId) {
    return Promise.all(
        [
            usersApi.getUsersByIdPromise(userId),
            postsApi.getPostsForUserPromise(userId)
        ]
    ).spread((user, posts) => {
        user.posts = posts;

        for (let post of user.posts){
            commentsApi.getCommentsForPostPromise(post.id)
                .then(comments => {                   
                    //Merge comments to post
                    //How do i return a merged user object
                });
        }        
    })
}

Answer 1

You were on the right track, see comments:

var xyz = function (userId) {
    // Start parallel requests for user and posts
    return Promise.all(
        [
            usersApi.getUsersByIdPromise(userId),
            postsApi.getPostsForUserPromise(userId)
        ]
    ).then(([user, posts]) => { // Note the destructuring
        // We have both user and posts, let's add the posts to the user
        user.posts = posts;

        // Send parallel queries for all the post comments, by
        // using `map` to get an array of promises for each post's
        // comments
        return Promise.all(user.posts.map(post => 
            commentsApi.getCommentsForPostPromise(post.id)
                .then(comments => {                   
                    // Have the comments for this post, remember them
                    post.comments = comments;
                })
            ))
            // When all of those comments requests are done, set the
            // user as the final resolution value in the chain
            .then(_ => user);
    });
};

Example:

 // Mocks var commentId = 0; var usersApi = { getUsersByIdPromise(userId) { return new Promise(resolve => { setTimeout(_ => resolve({id: userId, name: "Some User"}), 100); }); } }; var postsApi = { getPostsForUserPromise(userId) { return new Promise(resolve => { setTimeout(_ => resolve([ {userId: userId, id: 1, title: "Post 1"}, {userId: userId, id: 2, title: "Post 2"} ]), 100); }); } }; var commentsApi = { getCommentsForPostPromise(postId) { return new Promise(resolve => { setTimeout(_ => resolve([ {postId: postId, id: ++commentId, title: "First comment on post id = " + postId}, {postId: postId, id: ++commentId, title: "Second comment on post id = " + postId}, {postId: postId, id: ++commentId, title: "Third comment on post id = " + postId} ]), 100); }); } }; // Code var xyz = function (userId) { // Start parallel requests for user and posts return Promise.all( [ usersApi.getUsersByIdPromise(userId), postsApi.getPostsForUserPromise(userId) ] ).then(([user, posts]) => { // Note the destructuring // We have both user and posts, let's add the posts to the user user.posts = posts; // Send parallel queries for all the post comments, by // using `map` to get an array of promises for each post's // comments return Promise.all(user.posts.map(post => commentsApi.getCommentsForPostPromise(post.id) .then(comments => { // Have the comments for this post, remember them post.comments = comments; }) )) // When all of those comments requests are done, set the // user as the final resolution value in the chain .then(_ => user); }); }; // Using it xyz().then(user => { console.log(JSON.stringify(user, null, 2)); }); 

 .as-console-wrapper { max-height: 100% !important; } 

Although actually, we could start requesting the comments for the posts as soon as we have the posts, without waiting for the user until later:

var xyz = function (userId) {
    return Promise.all(
        [
            usersApi.getUsersByIdPromise(userId),
            postsApi.getPostsForUserPromise(userId).then(posts =>
                // We have the posts, start parallel requests for their comments
                Promise.all(posts.map(post => 
                    commentsApi.getCommentsForPostPromise(post.id)
                        .then(comments => {
                            // Have the post's comments, remember them
                            post.comments = comments;
                        })
                ))
                // We have all the comments, resolve with posts
                .then(_ => posts)
            )
        ]
    ).then(([user, posts]) => { // Note the destructuring
        // We have both user and posts (with their filled-in comments)
        // Remember the posts on the user, and return the user as the final
        // resolution value in the chain
        user.posts = posts;
        return user;
    });
};

Example:

 // Mocks var commentId = 0; var usersApi = { getUsersByIdPromise(userId) { return new Promise(resolve => { setTimeout(_ => resolve({id: userId, name: "Some User"}), 100); }); } }; var postsApi = { getPostsForUserPromise(userId) { return new Promise(resolve => { setTimeout(_ => resolve([ {userId: userId, id: 1, title: "Post 1"}, {userId: userId, id: 2, title: "Post 2"} ]), 100); }); } }; var commentsApi = { getCommentsForPostPromise(postId) { return new Promise(resolve => { setTimeout(_ => resolve([ {postId: postId, id: ++commentId, title: "First comment on post id = " + postId}, {postId: postId, id: ++commentId, title: "Second comment on post id = " + postId}, {postId: postId, id: ++commentId, title: "Third comment on post id = " + postId} ]), 100); }); } }; // Code var xyz = function (userId) { return Promise.all( [ usersApi.getUsersByIdPromise(userId), postsApi.getPostsForUserPromise(userId).then(posts => // We have the posts, start parallel requests for their comments Promise.all(posts.map(post => commentsApi.getCommentsForPostPromise(post.id) .then(comments => { // Have the post's comments, remember them post.comments = comments; }) )) // We have all the comments, resolve with posts .then(_ => posts) ) ] ).then(([user, posts]) => { // Note the destructuring // We have both user and posts (with their filled-in comments) // Remember the posts on the user, and return the user as the final // resolution value in the chain user.posts = posts; return user; }); }; // Using it xyz().then(user => { console.log(JSON.stringify(user, null, 2)); }); 

 .as-console-wrapper { max-height: 100% !important; }