阅读 555

CDN 引入 axios 和 qs 及其使用方法

本文已参与好文召集令活动,点击查看:后端、大前端双赛道投稿,2万元奖池等你挑战!

一些小项目,没必要搭建脚手架,直接以CDN的方式引入

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
</head>
<body>
    <div>
    </div>
    <script type="text/javascript">
        //一般引入qs库都赋值为qs,不过浏览器全局引入的是 window.Qs对象,
        //所以直接用 qs.stringify() 会报 qs undefined
        //方式1:var qs = Qs  qs.stringify()
        //方式2:Qs.stringify()
        var qs = Qs
        // 配置post的请求头
        axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
        // qs.stringify() 这里可以做一下封装
        axios.post('url', qs.stringify({
            id: 1,
            name: 'lxw'
        })).then(function (res) {
            // 返回 Promise对象数据
        })
    </script>
</body>
</html>
复制代码

qs的一些使用方法

qs.parse 方法可以把一段格式化的字符串转换为对象格式,比如
 
let url = 'http://localhost/index.htm?a=1&b=2&c=&d=xxx&e';
let data = qs.parse(url.split('?')[1]);
 
// data的结果是
{
    a: 1, 
    b: 2, 
    c: '', 
    d: xxx, 
    e: ''
}
 
qs.stringify
基本用法
qs.stringify 则和 qs.parse 相反,是把一个参数对象格式化为一个字符串。
 
let params = { c: 'b', a: 'd' };
qs.stringify(params)
 
// 结果是
'c=b&a=d'
排序
甚至可以对格式化后的参数进行排序:
 
qs.stringify(params, (a,b) => a.localeCompare(b))
 
// 结果是
'a=b&c=d'
指定数组编码格式
let params = [1, 2, 3];
 
// indices(默认)
qs.stringify({a: params}, {
    arrayFormat: 'indices'
})
// 结果是
'a[0]=1&a[1]=2&a[2]=3'
 
// brackets 
qs.stringify({a: params}, {
    arrayFormat: 'brackets'
})
// 结果是
'a[]=1&a[]=2&a[]=3'
 
// repeat
qs.stringify({a: params}, {
    arrayFormat: 'repeat'
})
// 结果是
'a=1&a=2&a=3'
处理json格式的参数
在默认情况下,json格式的参数会用 [] 方式编码,
 
let json = { a: { b: { c: 'd', e: 'f' } } };
 
qs.stringify(json);
//结果 'a[b][c]=d&a[b][e]=f'
但是某些服务端框架,并不能很好的处理这种格式,所以需要转为下面的格式
 
qs.stringify(json, {allowDots: true});
//结果 'a.b.c=d&a.b.e=f'
复制代码
文章分类
前端
文章标签