vue中qs的两个方法是什么

青灯夜游原创: 2022-12-21 18:19:001741浏览

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

本教程操作环境：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));

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

{"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字符串格式
	stringif方法	对象数据：{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'}