qs插件在开发中用的很多。用来做参数序列化很方便。但是最近发现自己项目在通过cdn方式引入的时候遇到了一些小坑。
在cli所在的node环境中,我们直接通过npm install qs --save 安装以后通过import qs from “qs”就可以方便使用,但是在cdn引入的情况下qs是不起作用的。查了很久发现。原来应该是Qs...比如:
<script src="https://cdn.bootcss.com/qs/6.5.2/qs.js"></script>
<script>
var data={
mobile:name,
password:pass
}
fetch(url+"/account/login",{
method:'POST',
headers:{
'Content-Type': 'application/x-www-form-urlencoded'
},
body:Qs.stringify(data) --------->注意这里是Qs而不是qs
}).then((res)=>{
return res.json()
}).then(data=>{
console.log("data:",data)
}).catch(err=>{
console.log("err:",err)
})
}
</script>
为了方便,自己封装了一个函数。可以实现参数序列化功能。
const qsTransform=(data,type)=>{
var str=type==="POST"||"post"?" ":"?"
if(typeof(data)!=="object"&&!Array.isArray(data)){
return ""
}
Object.entries(data).forEach(([key,value],index,arr)=>{
if(index===arr.length-1){
str+=`${key}=${stringiFy(value)}`
}else{
str+=`${key}=${stringiFy(value)}&`
}
})
return str
}
const stringiFy=(data)=>{
if(typeof data==="object"){
return JSON.stringify(data)
}
return data
}
完美解决这个问题。