前端传参如果参数过多你还会拼接在URL上嘛？

很晚很晚了2023-10-19 11:02

当然除了 '+' 拼接你也可以用模版字符串的方式，相对来说可能要好一些，但是如果字段太多的话，还是不太方便，所以这里介绍一种其他的方式，比如qs。

qs是npm仓库所管理的包，可以通过npm install qs安装，因此我们可以直接通过require('qs')引用得到,qs.stringify()作用是将对象或者数组序列化成URL的格式。那么这句话是什么意思呢？

我们先来看一下官方的用法

Usage

js 复制代码

var qs = require('qs');
var assert = require('assert');

var obj = qs.parse('a=c');
assert.deepEqual(obj, { a: 'c' });

var str = qs.stringify(obj);
assert.equal(str, 'a=c');

非常简单，直接引入然后通过qs.stringify() ,qs.parse() 就可以了。

下面我们举两个例子：

对象序列化

vbnet 复制代码

let obj = {
methods: 'query_num'
id: 1,
name: 'Lisa'
}
qs.stringify(obj)
//   methods=query_stu&id=1&name=chenchen    这就是我们的传到服务器的url

数组序列化

css 复制代码

let arr = [1,3]
qs.stringify({a:arr})
// 'arr[0]=1&arr[1]=3'

这种格式可以进行转为序列化，但是url中会带有数组的下标a $0$ 、a $1$ ，这并不是我们一般的处理办法。常用方法如下：

php 复制代码

// 常用并推荐使用
let arr = [1,3]
qs.stringify({a:arr},{indices:false});
// 'arr=1&arr=3' 这个格式，是比较常用的格式

其中：indices:false，去除默认处理的方式。如果不写这个的话，则默认是第一种处理的方式(带下标)。

qs.parse()则就是反过来的，将我们通过qs.stringify()序列化的对象或者数组转回去。

bash 复制代码

let url = 'id=1&name=chenchen'
qs.parse(url)
// {id:1，name:chenchen}

接下来看一个实例：

php 复制代码

// 根据业务id查询业务费用列表
export function commonBuzCostPage(params) {
  return request({
    url: `/departmentCost/commonBuzCostPage`,
    method: 'get',
    params,
    paramsSerializer: params => {
      return qs.stringify(params, {
        indices: false
      })
    }
  })
}

javascript 复制代码

fetch(`${apiurl}/projiects?${qs.stringify(param)}`) 
.then(async response =>{
    if (response.ok){
        setList(await response.json())
        }
    })