Get请求时 传键值对无法解析

[ByteXiong]

请详细描述bug

get传参{ keyWord:"", sortList: { sort: 'desc' }}
在Axios中 get url: ?keyWord=&sortList[sort]=desc
在alova中 get url: ?keyWord=&sortList=[object%20Object]

复现链接

No response

复现步骤

get请求传 json 键值对

期望的表现

No response

alova 版本

2.20.5

设备/浏览器/浏览器版本

No response

额外的说明

No response

[MeetinaXD]

你好，请提供部分可复现的代码。

[ByteXiong]

const list = ref([]);
const param = reactive({
pageIndex: 1, //当前页
pageSize: 10, //当前显示
sortList: { sort: 'desc' },
});
const getData = async () => {
let { data } = await get('/api/UserAddress/getMyPage', param, loading);
list.value.push(...data.data);
};

[MeetinaXD]

这看着不是 alova 的用法，你是不是在用 axios 或者其他的库？

[ByteXiong]

export const get = <T = any>(url: string, params?: T, loading?: Ref) => {
if (loading) loading.value = true;
return useRequest(request.Get(url, { params: params || {} }))
.send()
.finally(() => {
if (loading) loading.value = false;
});
};
我底层封装过, 你get 传一个键值对参数{sortList: { sort: 'desc' }}就能找到问题

[ByteXiong]

我想解决的问题是 在 http query里怎么才能传键值对

[MeetinaXD]

了解了，原来你说的是嵌套对象下的序列化问题。

这个问题我们复现了。目前你暂时可以通过 qs 来手动序列化 params。

问题修复后我们会在这里回复 :)

[LengGeng]

我也遇到了类似的问题，现在 alova 的 params 总的数组会被转换成 1,2,3
我本以为 alova是在 adapter 中处理的，但实际上 alova 是在 /src/functions/sendRequest.ts[58] 的 /src/functions/sendRequest.ts 函数中进行了 url 的构建，是否可以像 axios 中 提供类似 paramsSerializer 的配置可以让用户进行配置

[JOU-amjs]

我有一个新的想法，为什么不在beforeRequest中处理呢，这样会有更好的灵活度，例如你还可以用meta元数据来标识哪些需要序列化参数。

createAlova({
  // ...
  beforeRequest(method) {
    if (method.meta.serializeParams) {
      method.config.params = qs.stringify(method.config.params);
    }
  }
});

[LengGeng]

我现在也是这样处理的，如果在代码中添加，最好在文档中写出示例方法

/**
 * 参数序列化方法
 * @param method method 实例
 */
function paramsSerializer(method: Method) {
  if (method.config.params) {
    const queryParamsStr = qs.stringify(method.config.params, { arrayFormat: "brackets" });
    if (queryParamsStr === "") return;

    method.url = method.url.includes("?") ? `${method.url}&${queryParamsStr}` : `${method.url}?${queryParamsStr}`;

    // 不删除的话 alova 里面还会对 `params` 再次处理
    delete method.config.params;
  }
}

[JOU-amjs]

@LengGeng 这个很不错，我觉得还可以让params支持string，这样不用手动自己处理拼接，也不需要手动delete了😎。文档内我再加下这个示例，熟悉的朋友可以接手这个改进，具体如下：

const method = alova.Get('/xxx', {
  params: 'a=1&b=2'
});

也可以在全局拦截器中将params转换为字符串。

createAlova({
  beforeRequest(method) {
    method.config.params = qs.stringify(method.config.params, { arrayFormat: "brackets" });
  }
})

[Ya-hui]

@LengGeng 这个很不错，我觉得还可以让params支持string，这样不用手动自己处理拼接，也不需要手动delete了😎。文档内我再加下这个示例，熟悉的朋友可以接手这个改进，具体如下：

const method = alova.Get('/xxx', {
  params: 'a=1&b=2'
});

也可以在全局拦截器中将params转换为字符串。

createAlova({
  beforeRequest(method) {
    method.config.params = qs.stringify(method.config.params, { arrayFormat: "brackets" });
  }
})

method.config.params = qs.stringify(method.config.params, { arrayFormat: "brackets" }); 这个测试了吗？ 我这边用起来还是编码了

?0=&&1=d&2=a&3=t&4=a&5==&6={&7=%22&8=s&9=c&10=e&11=n&12=e&13=%22&14=:&15=%22&16=i&17=t&18=e&19=m&20=%22&21=,&22=%22&23=o&24=f&25=f&26=e&27=r&28=I&29=d&30=%22&31=:&32=%22&33=7&34=3&35=7&36=8&37=7&38=7&39=8&40=1&41

[JOU-amjs]

@Ya-hui 还没有实现哦

[Ryan-CW-Code]

感觉可以在文档中说明一下，这个问题我们也遇到了。
管理平台查询参数时传递特殊字符的场景还蛮多的
@JOU-amjs

[chaozwn]

我建议参考axios，设计一个paramsSerializer接口，留给用户。

const service: AxiosInstance = axios.create({
	baseURL: import.meta.env.VITE_API_URL,
	timeout: 50000,
	headers: { 'Content-Type': 'application/json' },
	paramsSerializer: {
		serialize(params) {
			return qs.stringify(params, { allowDots: true });
		},
	},
});

export interface ParamsSerializerOptions extends SerializerOptions {
  encode?: ParamEncoder;
  serialize?: CustomParamsSerializer;
}

export interface CustomParamsSerializer {
  (params: Record<string, any>, options?: ParamsSerializerOptions): string;
}

export interface ParamEncoder {
  (value: any, defaultEncoder: (value: any) => any): any;
}

export interface SerializerOptions {
  visitor?: SerializerVisitor;
  dots?: boolean;
  metaTokens?: boolean;
  indexes?: boolean | null;
}

export interface SerializerVisitor {
  (
      this: GenericFormData,
      value: any,
      key: string | number,
      path: null | Array<string | number>,
      helpers: FormDataVisitorHelpers
  ): boolean;
}

[JOU-amjs]

@chaozwn 这个我先保留下意见，因为alova其实是各种请求方案的上层封装，并不想直接替代请求库，如果paramsSerializer是不错的选择，直接使用axios作为请求适配器然后在axios上设置paramsSerializer就可以直接达到效果了。不过这个问题的提议是非常不错的。