Vue async/await场景下如何从接口返回JSON中筛选保留指定字段

你不需要使用Promise.all，这是纯同步的数据结构转换操作，只需逐层显式提取你需要保留的白名单字段即可，修改后的fetchCars方法如下：

async fetchCars() {
  try {
    let response = await fetch("https://cars.com/api/")
    let rawData = await response.json()
    // 按白名单逐层过滤字段
    this.cars = {
      // 顶层保留字段
      owner: rawData.owner,
      cars: rawData.cars?.map(car => ({
        // 车辆层级保留字段
        model: car.model,
        make: car.make,
        features: car.features?.map(feature => ({
          // 配置层级保留字段
          gear: feature.gear,
          roof: feature.roof
        })) || []
      })) || []
    }
  } catch (e) {
    console.log(e)
  }
}

补充说明 #

• 代码中使用了可选链?.和兜底空数组|| []，避免接口返回字段缺失时出现报错
• 所有保留的字段都显式声明，后续如果需要调整保留字段，直接修改对应层级的取值逻辑即可
• 如果需要处理更复杂的多层嵌套结构，也可以把字段过滤逻辑封装成通用的白名单过滤函数复用，示例如下：

// 通用白名单过滤函数
function filterByWhitelist(obj, whitelist) {
  return Object.fromEntries(
    Object.entries(obj).filter(([key]) => whitelist.includes(key))
  )
}

// 使用示例：顶层保留owner、cars字段
const topLevelFiltered = filterByWhitelist(rawData, ['owner', 'cars'])

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