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
             }

完美解决这个问题。