站长资讯网
最全最丰富的资讯网站

vue中qs的两个方法是什么

qs的两个方法是:1、stringify方法,用于将对象序列化成url形式的字符串,以“&”符号进行拼接,语法“qs.stringify(data)”;2、parse方法,用于将URL形式的字符串解析成对象,语法“qs.parse(data)”。

vue中qs的两个方法是什么

本教程操作环境:windows7系统、vue3版,DELL G3电脑。

一、qs是什么?

qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。可以进行对象与字符串之间的一个转换。

二、qs的安装

qs,是axios中自带的,也是npm仓库所管理的包。

安装方式:

npm install qs
登录后复制

Vue项目中的导入方式:

import qs from 'qs'
登录后复制

Vue项目中的main.js中设置全局属性的方式:

Vue.prototype.$qs = qs
登录后复制

三、qs应用场景

使用axios,调用后端接口时使用到的。

请求方式为post,axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urllencoded',将对象或数组的参数使用qs.stringify()进行序列化转化

四、qs使用

介绍它的两个方法:stringify和parse。

qs.stringify(data)

stringify方法,是将对象序列化成url形式的字符串,以&符号进行拼接。

onst Qs = require('qs'); let obj= {  method: "query_sql_dataset_data",  projectId: "85",  appToken: "7d22e38e-5717-11e7-907b-a6006ad3dba0",  datasetId: " 12564701" }; Qs.stringify(obj); console.log(Qs.stringify(obj));
登录后复制

如上面代码所示,输出结果如下

vue中qs的两个方法是什么

{"uid":"cs11","pwd":"000000als","username":"cs11","password":"000000als"} uid=cs11&pwd=000000als&username=cs11&password=000000als
登录后复制

qs.parse(data)

parse方法,是将URL形式的字符串解析成对象

示例及输出效果如下:

import qs from 'qs'  const userStr = 'name=xiaoming&password=123456' //qs.parse(userStr) console.log('转换后的格式:',qs.parse(userStr))  // Object{ //          name:'xiaoming', //          password:'123456' //        }
登录后复制

五、qs与JSON的区别

一直不太了解qs与JSON到底有什么区别?!网上仔细查了一下,总结如下:

qs与JSON的区别
qs JSON
相同点 都是进行对象与字符串之间的转换
异同点 stringif方法 前后端交互时,将对象序列化为url形式的数据,用&拼接

数据转化为正常的json字符串格式

对象数据:{name:'xiaoming',password:'123123'}

转换后数据:

name=xiaoming&password=123123

对象数据:{name:'xiaoming',password:'123123'}

转换后数据:

’{"name":"xiaoming","password":"123123"}‘

parse方法

字符串数据:

name=xiaoming&password=123123

转换后数据:

{name:'xiaoming',password:'123123'}

字符串数据:

’{"name":"xiaoming","password":"123123"}‘

转换后数据:

{name:'xiaoming',password:'123123'}

赞(0)
分享到: 更多 (0)
网站地图   沪ICP备18035694号-2    沪公网安备31011702889846号