React 项目中，使用qs.parse 踩过的坑（默认编码、解码影响数据解析）

   qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。

   最近在React 项目中，用到npm 的qs模块的parse函数，用于获取url参数及解析&拼接的数据，再此过程中遇到参数中“+”丢失的问题。

   查看qs 模块的使用示例后发现（https://www.npmjs.com/package/qs）， qs.parse()函数默认会进行 URI 编码解析，如果这种解码方式与之前数据编码方式不同就会有问题，同时解码会将“+”变成空格。这个同浏览器有点类似，当我们在url中传递的参数带有加号+，会被浏览器转换成空格，这样会导致后台获取到无效的参数。所以我们希望采用encodeURIComponent()进行编码，并且采用decodeURIComponent()进行解码，这就需要我们在使用qs时指定编码方式。
   编码示例如下：

var encoded = qs.stringify({ a: { b: 'c' } }, { encoder: function (str, defaultEncoder, charset, type) {
    if (type === 'key') {
        return str; // 对于key值不进行编码
    } else if (type === 'value') {
        return decodeURIComponent(str);// Encoded value
    }
}})

解码示例如下：

var decoded = qs.parse('x=AA+&y=AA-', { decoder: function (str, defaultEncoder, charset, type) {
    if (type === 'key') {
        return str;
    } else if (type === 'value') {
        return encodeURIComponent(str);
    }
}})

如果不需要进行编码和解码操作，可以不进行编码：

var strObj = qs.parse('key=x=AA+&y=AA-', { decoder: str => str }