关于UrlSearchParams对象和qs序列化参数

1.什么是UrlSearchParams

根据我目前的了解,UrlSearchParams其实就是浏览器的原生构造函数,大部分时候我们用它来实例化一个UrlSearchParams对象,这个对象可以使用以下一些目前我所知道的方法

		let obj = new URLSearchParams();
		obj.append("string","小明"); // 添加属性
		obj.get("string"); // 获取属性值
		obj.set("string"); // 设置属性值,存在多个只匹配第一个,删除其他
		obj.delete("string"); // 删除属性

最后发起网络请求把这个obj对象当成参数就可以了,但是网络请求这么组装参数着实比较麻烦,而且对象和数组还得单独处理一遍后端才能拿到

2.qs的作用

有时候前端需要传递数组或者对象给后端,但是单纯的创建一个数组或者对象然后当成请求参数后端是拿不到你传递的数组或者对象的,比如传递的数组在network里长这样

arr:1月,2月,3月,4月,5月,6月,7月,8月,9月,10月,11月,12月

但后端要的长这样
arr[0]:1月
arr[1]:2月
arr[2]:3月

qs的stringify方法就是帮我们序列化数组和对象

数组:

qs.stringify(obj,{arrayFormat:'indices'});//结果为:
arr[0]:1月
arr[1]:2月

对象:

原来对象是这样

obj = {
name: "苹果",
price: "7000",
}

在network里是这样

qs.stringify(obj,{arrayFormat:'indices'});//结果为:
obj.name:苹果,
obj.price:7000

对象数组互相嵌套

obj_arr = {
	name:"小明",
	age: 25,
	hobby:["sing","dance","cook"]
}
arr_obj = {
	arr: [
			"message1",
			"message2"
		],
	obj: {
			name: "xiaoming",
			age: 25
		}
}

obj_arr和arr_obj在network里分别是这样

qs.stringify(obj_arr,{arrayFormat: "indices", allowDots: true});//结果为
name=小明
age=25
hobby[0]=sing
hobby[1]=dance
hobby[2]=cook
qs.stringify(arr_obj,{arrayFormat: "indices", allowDots: true});//结果为
arr[0]=message1
arr[1]=message2
obj.name=xiaoming
obj.age=25

(层级最好小于5,最新版本的qs是支持更深层级的,但考虑到一些浏览器兼容问题,还是不要用那么新的吧)
这样的对象和数组后端才能成功拿到;
其他形式的参数参考中文文档(别人翻译的:https://www.jianshu.com/p/0976c9f579ed),或者gitHub上的源码和最全文档只不过没翻译(https://github.com/ljharb/qs/tree/v6.0.0)

你可能感兴趣的:(前端,javascript,开发工具)