[英]JS Promise API: Create a loop of promises and merge result into another object
我試圖了解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!"
}
]
}
]
}
我面臨的挑戰是將評論合並到每個帖子中。 請幫忙。 我的意思是我不確定該怎么辦。
當前實施。
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
});
}
})
}
您處在正確的軌道上,請參閱評論:
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; }
盡管實際上,我們可以在收到帖子后立即開始請求帖子的評論,而不必等到以后再等待用戶:
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; }
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.