如何在.map循环中调用fetch获取API数据并正确返回结果

DevOps 小满

2026-10-7

问题根因

你写的代码存在两个核心问题：

map的回调函数没有显式返回值：回调内部执行了fetch逻辑，但没有将fetch返回的Promise对象return出去，最终map生成的数组所有元素都是undefined
fetch是异步IO操作：就算你补全了return语句，直接拿到的也只是Promise对象组成的数组，不是接口返回的实际数据，必须等待所有异步操作执行完成才能拿到最终结果

实现方案

方案1：Promise.all + then 链式调用

// 先遍历生成Promise数组
const promiseArr = urls.map(url => {
  // 显式return fetch返回的Promise
  return fetch(url)
    .then(response => response.json())
    .catch(err => {
      console.log(err)
      // 可选：单个接口报错时返回兜底值，避免影响其他接口的结果获取
      return null
    })
})

// 等待所有Promise执行完成，拿到最终结果数组
Promise.all(promiseArr).then(allData => {
  // 此处的allData就是所有接口返回的JSON数据组成的数组
  console.log(allData)
})

方案2：async/await 语法糖（可读性更高）

async function fetchAllData(urls) {
  const promiseArr = urls.map(async url => {
    try {
      const res = await fetch(url)
      return await res.json()
    } catch (err) {
      console.log(err)
      return null
    }
  })
  // 等待所有异步请求完成
  const allData = await Promise.all(promiseArr)
  return allData
}

// 调用方法
fetchAllData(urls).then(allData => {
  console.log(allData)
})

注意事项