qs.stringify详解

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了qs.stringify详解相关的知识,希望对你有一定的参考价值。

参考技术A 默认情况下,axiosjavascript对象序列化为JSON。 要以application / x-www-form-urlencoded格式发送数据,您可以使用以下选项之一。

或者以另一种方式(ES6)

详解:
axios默认的content-type是application/json
也就是java后端经常让你把参数放在body中的那种格式
传输的样式是
requestbody

如果使用的qs进行序列化
那么content-type就是application/x-www-form-urlencoded
也就是常说的表单提交
传输的样式是
formdata

urlencoding后是
name=xxx&age=xxx

所以,实际上是否需要用 qs 去序列化参数完全取决于后端要怎么接受数据

qs.stringify()qs.parse()的使用

  • qs是什么?
  • 使用方法
  1. qs是npm仓库所管理的包,可以通过npm install qs安装,因此我们可以直接通过require(\'qs\')引用得到哦~。

  2. qs.stringify()作用是将对象或者数组序列化成URL的格式。那么这句话是什么意思呢?

 

             举两个栗子:

    对象序列化

let obj = 
methods: \'query_stu\'
id: 1,
name: \'chenchen\'

qs.stringify(obj)
//   methods=query_stu&id=1&name=chenchen    这就是我们的传到服务器的url

 

    数组序列化

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

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

// 常用并推荐使用
let arr = [2,3]
qs.stringify(a:arr,indices:false);
// \'arr=2&arr=3\' 注意这个格式,一般使我们常用的格式哦~

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

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

    举个栗子:

let url = \'id=1&name=chenchen\'
qs.parse(url)
// id:1,name:chenchen  
最后贴一个我司的一个api,给大家一个真实的感受:
// 根据业务id查询业务费用列表
export function commonBuzCostPage(params) 
  return request(
    url: `/departmentCost/commonBuzCostPage`,
    method: \'get\',
    params,
    paramsSerializer: params => 
      return qs.stringify(params, 
        indices: false
      )
    
  )

以上是关于qs.stringify详解的主要内容,如果未能解决你的问题,请参考以下文章

qs.stringify和JSON.stringify()

qs.stringify和JSON.stringify的使用和区别

qs.stringify()qs.parse()的使用

qs.parse()qs.stringify()JSON.parse()JSON.stringify()使用方法

qs.parse()qs.stringify()使用方法

小tips: qs.stringify() 和JSON.stringify()的区别以及在vux中使用post提交表单数据需要qs库序列化