qs用法小结

使用axios发请求传参时,需要对参数进行处理,用到了qs,第一次接触,懵逼,刷了遍文档,简单记录下qs的使用。

基本概念

qs: a querystring parse with nesting support.

主要方法:parse, stringily.

1
2
3
4
5
const qs = require('qs');

qs.parse(string, [options]);

qs.stringily(object, [options])

最新版本:6.6.0,示例代码以6.5.2为主, 所有代码参考其github主页

parse

可供设置的options及默认options:default.

看几个简单的例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
const qs = require('qs');

console.log(qs.parse('foo[bar]=baz'));
// 输出: foo: { bar: 'baz' } }

// 最多可以解析到5个子层
const fiveChilden = qs.parse('a[b][c][d][e][f][g][h][i]=j')
console.log(fiveChilden);
/* 输出:
{ a: { b: { c: [Object] } } }
如果你的输出也是这样,别着急,是console的问题: console.log() is invariably limited to 2 levels.
*/


// 使用util.inspect再输出
const util = require('util');
console.log(util.inspect(fiveChilden, {showHidden: false, depth: null}))
// 输出: { a: { b: { c: { d: { e: { f: { '[g][h][i]': 'j' } } } } } } }


// 带 ?

console.log(qs.parse('?a=b&c=d'));
// 输出: { '?a': 'b', c: 'd' }

console.log(qs.parse('?a=b&c=d', { ignoreQueryPrefix: true }));
// 输出: { a: 'b', c: 'd' }

// 不带 ?
console.log(qs.parse('a=b&c=d'));
// 输出: { a: 'b', c: 'd' }

// 带.
console.log(qs.parse('a.b=c'));
// 输出: { 'a.b': 'c' }

console.log(qs.parse('a.b=c', { allowDots: true }));
// 输出: { a: { b: 'c' } }

// 带有 ,与文档中的comma设置输出不一致
console.log(qs.parse('a=b,c', { comma: true }));
// 输出: { a: 'b,c' }


// parse 数组

console.log(qs.parse('a[]=b&a[]=c'));
// 输出: { a: [ 'b', 'c' ] }

//带索引,索引 <= 20 才能正确解析
console.log(qs.parse('a[1]=b&a[2]=c'));
// 输出: { a: [ 'b', 'c' ] }

console.log(qs.parse('a[20]=b'));
// 输出: { a: [ 'b' ] }

console.log(qs.parse('a[200]=b'));
// 输出: { a: { '200': 'b' } }

// 数据有空值
console.log(qs.parse('a[]=&a[]=b'));
// 输出: { a: [ '', 'b' ] }

// 数组对象
console.log(qs.parse('a[][b]=c'));
// 输出: { a: [ { b: 'c' } ] }

// 传递null, 可设置 strictNullHandling true
console.log(qs.parse('a&b='));
// 输出: { a: '', b: '' }

console.log(qs.parse('a&b=', { strictNullHandling: true }));
// 输出: { a: null, b: '' }

这里有些奇怪的是comma部分,跟文档输出不一致,stringily也出现了同样的问题。去看了issues,发现已经有人提出来了,详见issue299, 等新版本修复发布。

stringily

可供设置的options及默认options:default.

直接上代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
const qs = require('qs');

// 对象
console.log(qs.stringify({ a: { b: 'c' } }));
// 输出: a%5Bb%5D=c

console.log(qs.stringify({ a: { b: 'c' } }, { encode: false }));
// 输出: a[b]=c

// 数组,默认 indices true
console.log(qs.stringify({ a: ['b', 'c', 'd'] }, { encode: false }));
// 输出: a[0]=b&a[1]=c&a[2]=d

console.log(qs.stringify({ a: ['b', 'c', 'd'] }, { indices: false }));
// 输出: a=b&a=c&a=d

// 使用 arrayFormat 来决定输出的Array样式

console.log(qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices', encode: false }));
// 输出: a[0]=b&a[1]=c

console.log(qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets', encode: false }));
// 输出: a[]=b&a[]=c

console.log(qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat', encode: false }));
// 输出: a=b&a=c

// 与文档中的comma设置输出不一致
console.log(qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'comma', encode: false }));
// 输出: a[0]=b&a[1]=c

// null 被当成空值处理
console.log(qs.stringify({ a: null, b: '' }));
// 输出: a=&b=

// 跳过值为null的key
console.log(qs.stringify({ a: 'b', c: null}, { skipNulls: true }));
// 输出: a=b

参考

qs