【vue-cli】qs插件
2021-11-22 本文已影响0人
嘻洋洋
qs插件是具有一些附加安全性的querystring解析和字符串化库
1. 使用流程
(1)安装
vue-cli项目中安装
npm install qs
(2)在vue中使用
import qs from 'qs'
http.adornData = (data = {}, openDefultdata = true, contentType = 'json') => {
var defaults = {
't': new Date().getTime()
}
data = openDefultdata ? merge(defaults, data) : data
return contentType === 'json' ? JSON.stringify(data) : qs.stringify(data)
}
2. 详细方法介绍
(1)URL解析成对象
qs.parse()
(2)对象序列化成URL的形式,以&进行拼接
qs.stringify()
var a = {name:'hehe',age:10};
qs.stringify(a)
// 'name=hehe&age=10'
JSON.stringify(a)
// '{"name":"hehe","age":10}'
3. 应用场景
传递参数时,参数形式可以是json的,还有一种参数形式是form-data ,默认情况下,axios将JavaScript对象序列化为JSON。也可以通过headers进行设置:
const http = axios.create({
timeout: 1000 * 1800,
withCredentials: true,
headers: {
'Content-Type': 'application/json; charset=utf-8'
}
})
如果要使用form-data格式,可以这样设置:
import qs from 'qs';
const data = { 'bar': 123 };
const options = {
method: 'POST',
headers: { 'content-type': 'application/x-www-form-urlencoded' },
data: qs.stringify(data),
url,
};
axios(options);
content-type是application/x-www-form-urlencoded,就要使用使qs进行序列化