Nuxt3中使用$fetch传递含复杂结构查询参数的正确实现方式咨询

嗨，针对你在Nuxt3里用$fetch传递复杂查询参数的困惑，我来分享下实用的解决思路和正确实现方式~

首先得明确：$fetch底层基于ofetch，它默认会把复杂对象查询参数序列化为URL编码的JSON字符串，但有些后端框架只认展开式键值对（比如你提到的filter[include][0]=category这种格式）。所以具体用哪种方式，核心得看后端接口的参数要求。

场景1：后端支持解析JSON字符串格式参数 #

如果后端能直接处理URL编码后的JSON字符串，你写的这段代码其实完全可行：

interface InterfaceTest {
  limit?: number
  filter?: { [key: string]: any }
}

// 动态构造查询参数
const options: InterfaceTest = {
  limit: 100,
  filter: {
    category: 1,
    color: ['red', 'black']
    // 可扩展更多字段
  }
}

async function callEndpoint() {
  const result = await $fetch('https://jsonplaceholder.typicode.com/todos/1', {
    query: options
  })
}

这种方式下，filter会被序列化为filter=%7B%22category%22:1,%22color%22:%5B%22red%22,%22black%22%5D%7D，只要后端能正确解析这个JSON字符串，就能正常拿到参数。

场景2：后端要求展开式键值对参数 #

如果后端只认filter[category]=1&filter[color][0]=red这类展开格式，你可以用Nuxt3内置的qs库来手动序列化参数：

import qs from 'qs'

interface InterfaceTest {
  limit?: number
  filter?: { [key: string]: any }
}

const options: InterfaceTest = {
  limit: 100,
  filter: {
    category: 1,
    color: ['red', 'black']
  }
}

async function callEndpoint() {
  const result = await $fetch('https://jsonplaceholder.typicode.com/todos/1', {
    // 用qs序列化得到展开式参数，encode: false可让$fetch自动处理URL编码
    query: qs.stringify(options, { encode: false })
  })
}

这样最终生成的参数就是后端期望的limit=100&filter[category]=1&filter[color][0]=red&filter[color][1]=black格式。

小提示 #

如果项目里很多接口都需要统一参数格式，建议封装一个自定义$fetch实例，把序列化规则配置好，避免重复写代码；另外一定要和后端确认好参数接收格式，两种序列化方式不能混用，不然会出现解析失败的问题。

备注：内容来源于stack exchange，提问作者Goryyn