Vue.js访问Google Books API返回的JSON数组元素报错求助

问题原因 #

组件初始化时，bookData被设为数组[]，但Google Books API返回的是包含items属性的对象。在异步请求完成前，模板尝试访问bookData.items[0].id，此时bookData是数组，不存在items属性，因此抛出TypeError: $data.bookData.items is undefined错误。仅展示{{ bookData.items }}时Vue会静默处理undefined，不会报错，但添加索引或属性访问时会触发类型错误。

解决方案 #

1. 初始化匹配API结构的默认值 #

修改组件data中的bookData初始值，使其匹配API返回的对象结构：

data() {
  return {
    bookData: { items: [] }
  }
}

初始状态下items是空数组，访问items[0]会得到undefined，Vue不会抛出错误，请求完成后数据会自动更新。

2. 使用可选链操作符（?.） #

在模板中使用ES6可选链操作符，确保每一层属性存在时才继续访问：

<h2>{{ bookData?.items?.[0]?.id }}</h2>

如果某一层为undefined或null，表达式会直接返回undefined，不会触发错误。

3. 添加条件渲染 #

通过v-if判断数据是否就绪，仅当items存在且有数据时再渲染：

<h2 v-if="bookData.items && bookData.items.length > 0">{{ bookData.items[0].id }}</h2>

可配合v-else添加加载提示：

<h2 v-if="bookData.items && bookData.items.length > 0">{{ bookData.items[0].id }}</h2>
<p v-else>加载中...</p>

4. 完善API请求的错误处理 #

原请求函数中创建错误但未抛出，修改后确保请求失败时能捕获异常：

const getBookData = async function() {
  const response = await fetch("https://www.googleapis.com/books/v1/volumes?q=a&key=AIzaSyBB6WfqDdlr307S_gGh7laVq5UrIpedl_TA")
  if (response.status == 200) {
    let data = await response.json();
    return data;
  } else {
    throw new Error(response.statusText)
  }
}
export { getBookData }

在组件中添加错误捕获逻辑：

async retrieveBookData() {
  try {
    this.bookData = await getBookData()
  } catch (err) {
    console.error('获取书籍数据失败:', err)
    // 可设置错误提示状态
  }
}

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