单个数组内发起多个关联Http调用获取业务数据的最优实现方案咨询

方案思路 #

你的思路完全可行，这是无后端服务场景下的最优实现方式，整体执行逻辑如下：

• 首先并行请求3个接口，三个接口无前置依赖，用Promise.all同时发起请求，比串行请求减少至少2/3的等待耗时
• 拿到全量返回数据后，先生成两张映射表，避免后续循环匹配时重复遍历，时间复杂度降到O(n)：
  • 用户映射表：以userId为key，对应用户名/用户完整信息为value
  • 评论映射表：以postId为key，对应该帖子的所有评论数组为value
• 最后用Array.map()遍历帖子列表，直接从两张映射表中读取对应数据，拼接成最终需要的渲染字段即可

代码示例 #

// 并行拉取所有数据
const [posts, users, comments] = await Promise.all([
  fetch('https://jsonplaceholder.typicode.com/posts').then(res => res.json()),
  fetch('https://jsonplaceholder.typicode.com/users').then(res => res.json()),
  fetch('https://jsonplaceholder.typicode.com/comments').then(res => res.json())
])

// 生成用户映射表
const userMap = {}
users.forEach(user => {
  userMap[user.id] = user.name
})

// 生成评论映射表
const commentMap = {}
comments.forEach(comment => {
  if (!commentMap[comment.postId]) {
    commentMap[comment.postId] = []
  }
  commentMap[comment.postId].push(comment)
})

// 拼接最终渲染数据
const renderList = posts.map(post => {
  return {
    ...post,
    username: userMap[post.userId] || '匿名用户',
    comments: commentMap[post.id] || []
  }
})

注意事项 #

• 不要在map遍历posts时，每次都去filter用户数组和评论数组找匹配项，数据量大时会产生大量重复遍历，性能远低于提前生成映射表的方案
• 映射表取值时建议加默认值，避免接口返回缺失对应id数据时页面报错

内容的提问来源于stack exchange，提问作者99Coder