Vue知识点:qs
最近在做一个Vue项目,对Vue也不太了解,硬着头皮努力做。在和后端接口交互时,交互成功,状态码200,但后端反馈参数数据有问题。于是就网上查找原因,原来需要qs将参数数据的格式进行一下序列化。这里就总结一下对qs的理解。
一、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形式的字符串,以&符号进行拼接。
示例及输出效果如下:
const userObj = {name:'xiaoming',password:'123123'}
qs.stringify(userObj)
console.log('转换后的格式:',qs.stringify(userObj)
// 转换后的格式:name=xiaoming&password=123123
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 | ||
---|---|---|---|
相同点 | 都是进行对象与字符串之间的转换 | ||
异同点 | stringify方法 | 前后端交互时,将对象序列化为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)