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

Question

我正在尝试了解 Promise API。

测试用例： 我正在使用来自jsonplaceholder 的三个API。

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

我需要将所有三个 API 的输出组合成如下结构。

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!"
                }
            ]
        }
    ]
}

我面临的挑战是将 cmets 合并到每个帖子。请帮忙。我的意思是我不确定该怎么做。

当前实施。

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

你在正确的轨道上，见 cmets：

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);
    });
};

例子：

// 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;
}

虽然实际上，我们可以在收到帖子后立即开始向 cmets 请求帖子，而无需等到用户之后：

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;
    });
};

例子：

// 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;
}