Nuxt3中使用useAPIFetch获取API数据：扩展Response类型及解构meta与data

你遇到的问题根源是给useAPIFetch指定了浏览器原生的Response类型，但实际上useAPIFetch会自动将API返回的JSON响应体解析为对象，而非原生Response实例。正确的做法是自定义API返回的数据类型，而非扩展Response类型。

步骤1：定义API响应的通用类型 #

先创建一个泛型接口来匹配你的API返回结构（包含meta和data）：

// 根据实际API返回结构调整meta的属性
interface APIResponse<T> {
  meta: {
    total?: number;
    page?: number;
    // 其他meta字段...
  };
  data: T[]; // 你的data是数组，用T[]表示
}

步骤2：定义具体的数据类型 #

针对/matters接口返回的数组元素，定义对应类型：

interface Matter {
  id: string;
  title: string;
  // 其他matter对象属性...
}

步骤3：在useAPIFetch中使用自定义类型 #

把泛型参数换成你定义的APIResponse<Matter>，而非Response：

const { data, error, pending, refresh } = await useAPIFetch<APIResponse<Matter>>("/matters", {
  method: "GET",
  params: {
    search: "",
    list: "",
  },
});

// data是Ref类型，需通过.value访问，同时处理可能的null值
const matters = data.value?.data;

额外说明 #

• useAPIFetch的泛型参数用于指定解析后的响应体类型，而非原生Response类型，之前指定Response完全不符合实际返回结构，才会触发类型错误。
• 泛型方式更灵活，可复用在其他返回相同结构的API请求上；若不需要复用，也可直接写死接口类型。
• 由于data可能为null（请求失败或未完成时），使用可选链?.可避免运行时错误，也可结合pending状态判断后再访问data.value.data。

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