qs插件参数序列化

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
             }

完美解决这个问题。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值