如何一次性发起多个GET请求获取多份JSON数据，现有单fetch代码求实现方案

核心使用Promise.all()或Promise.allSettled()并行处理多个fetch请求即可，具体实现如下：

基础实现（所有请求必须全部成功场景） #

如果你的业务要求所有拉取的JSON资源都是必须项，任意一个失败就终止后续处理，直接用Promise.all：

// 1. 先整理所有需要拉取的资源URL数组
const requestUrls = [
  './User.json',
  './Order.json',
  './Goods.json',
  // 按需添加你需要的其他JSON地址
]

// 2. 批量发起并行请求
Promise.all(
  requestUrls.map(url => 
    fetch(url, { method: "get" })
      .then(response => {
        // 单个请求异常捕获，避免错误原因不明确
        if (!response.ok) throw new Error(`${url} 请求失败，状态码：${response.status}`)
        return response.json()
      })
  )
)
.then(allResponseData => {
  // allResponseData为所有接口返回的JSON数组，顺序和requestUrls顺序完全对应，不受请求返回快慢影响
  allResponseData.forEach(data => {
    // 复用你原有的渲染逻辑，也可以根据不同接口写单独的处理逻辑
    data.results?.forEach(result => (list.innerHTML += template(result)))
  })
})
.catch(error => console.log(error))

兼容部分请求失败场景 #

如果允许部分资源加载失败，其他成功资源仍然正常渲染，把Promise.all替换为Promise.allSettled即可：

Promise.allSettled(
  requestUrls.map(url => 
    fetch(url, { method: "get" })
      .then(res => res.json())
  )
)
.then(results => {
  results.forEach((item, index) => {
    if (item.status === 'fulfilled') {
      // 处理请求成功的返回数据
      const data = item.value
      data.results?.forEach(result => (list.innerHTML += template(result)))
    } else {
      // 单独处理失败的请求，不影响其他成功请求的渲染
      console.log(`${requestUrls[index]} 拉取失败：`, item.reason)
    }
  })
})

注意事项 #

• Promise.all的性能和单发起多个请求没有差异，浏览器会自动控制并发数，不需要额外做并发限制
• 两种方案返回的结果数组顺序都和你定义的URL数组顺序完全一致，不需要担心请求先后顺序打乱结果

内容的提问来源于stack exchange，提问作者Basic Code