Nuxt3中useFetch如何对数组数据进行字段选择或深度选择？

当你使用useFetch的pick选项处理数组数据时失效，是因为pick仅作用于顶层响应对象。当API返回的是数组时，顶层结构是数组而非单个对象，数组本身并没有你指定的title字段，所以pick无法生效。

解决这个问题的核心是使用transform选项手动处理数组中的每个元素，实现字段筛选：

基础实现（仅筛选单个字段） #

const { data: useFetchArray } = await useFetch('https://jsonplaceholder.typicode.com/todos/', {
  transform: (response) => response.map(item => ({ title: item.title }))
})

console.log(useFetchArray.value)

通用实现（支持筛选多个字段） #

如果需要同时筛选多个字段，可以封装一个工具函数来复用逻辑：

// 定义字段筛选工具函数
const pickArrayFields = (items, fields) => {
  return items.map(item => {
    const pickedItem = {}
    fields.forEach(field => {
      if (item.hasOwnProperty(field)) {
        pickedItem[field] = item[field]
      }
    })
    return pickedItem
  })
}

// 在useFetch中使用
const { data: useFetchArray } = await useFetch('https://jsonplaceholder.typicode.com/todos/', {
  transform: (response) => pickArrayFields(response, ['id', 'title'])
})

console.log(useFetchArray.value)

原理说明 #

transform选项允许你在数据被赋值给data之前，对原始响应数据进行任意处理。通过遍历数组中的每个对象，我们可以精准提取需要的字段，从而实现和单个对象场景下pick相同的效果，同时适配数组结构。

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