求助：JavaScript中fetch请求Promise未解析问题的修复方案

问题原因 #

你代码里的response.json()返回的是一个Promise对象，但你直接把它赋值给了completeItem.data，没有等待这个Promise解析完成，所以最终returnedItem.data还是未完成的Promise，自然无法访问里面的实际数据。另外，results.map(result => console.log(result))会返回全是undefined的数组——因为console.log没有返回值，这会导致setFetchedItems拿到无效数据。

修复方案1：使用async/await解析JSON #

在fetch的then回调中加入async关键字，用await等待response.json()解析完成：

const handleFetchPrices = async () => {
    // 遍历购物列表，为每个商品发起fetch请求获取价格。
    const promises = shoppingList.map(item => {
      return fetch(`https://api.evemarketer.com/ec/marketstat/json?typeid=${item.typeid}${jita}`)
        .then(async response => {
          let completeItem = {
            data: await response.json(), // 等待JSON解析完成
            name: item.name,
            amount: item.amount,
          }
          return completeItem
        })
    })
    // 所有fetch请求完成后，调用setFetchedItems
    Promise.all(promises).then(results => {
      // 修正map逻辑：打印后返回原结果，避免得到undefined数组
      const returnedItems = results.map(result => {
        console.log(result)
        return result
      })
      setFetchedItems(returnedItems)
    })
  }

修复方案2：链式then处理JSON解析 #

更简洁的方式是先链式处理response.json()的Promise，拿到解析后的数据再组装对象：

const handleFetchPrices = async () => {
    const promises = shoppingList.map(item => {
      return fetch(`https://api.evemarketer.com/ec/marketstat/json?typeid=${item.typeid}${jita}`)
        .then(response => response.json()) // 先解析JSON，拿到实际数据
        .then(data => {
          // 用解析后的数据组装对象
          return {
            data,
            name: item.name,
            amount: item.amount,
          }
        })
    })
    Promise.all(promises).then(results => {
      console.log(results)
      setFetchedItems(results) // 直接使用结果数组
    })
  }

关键修复点 #

• 必须等待response.json()的Promise完成，才能拿到实际的JSON数据，不能直接把Promise赋值给data字段。
• 修正map的返回逻辑，确保returnedItems是包含正确数据的数组，而不是全undefined的无效数组。

内容的提问来源于stack exchange，提问作者Daniel Johansen