vue3安装qs库，解决参数传递中数组格式不合法问题

choorn

已于 2023-09-18 20:57:58 修改

阅读量1.4k

点赞数

分类专栏： vue3 文章标签： vue.js 前端

于 2023-05-05 22:45:34 首次发布

本文链接：https://blog.csdn.net/choorn/article/details/130516854

版权

vue3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章讲述了在TypeScript项目中，如何利用qs库将包含数组的参数转换为后端可以接受的合法URL查询字符串格式，例如将`array[]=1&array[]=2`转换为`array=1&array=2`。通过安装qs库和设置特定的序列化选项如`indices:false,allowDots:true`，可以在axios的请求中正确处理数组参数。

摘要由CSDN通过智能技术生成

ts语言中使用qs，将参数中的数组转化为合法格式传递给后端，默认数组格式?array[]=1&array[]2不合法，转化后的合法格式 ?array=1&array=2

安装qs

npm install qs
npm i --save-dev @type/qs      //解决ts语言中对于类型判断报错的问题

引入qs
```
import { stringify } from 'qs';
```

使用qs

async function sendRequest(type:string,url:string,param: unknown) {
    
    try {
        const response = await axios({
            url: `${baseUrl}${url}`,
            method: type,
            params: param,
            //这里是使用qs的地方            
            paramsSerializer: params => {
                return stringify(params,{indices:false,allowDots:true}); 
            }
        });
        return response.data;

    } catch (error) {
        ElMessage(String(error));
    }
}