直接上代码
uni.request({
url: 'example.php', //仅为示例，并非真实的接口地址
method: 'GET',
data: {
x: [1,2],
y: '2'
}
})
上述这段代码，在支付宝小程序和微信小程序中，解析出来的参数是一致的嘛？先说结果，答案是不一致。 我们来看看两者最终生成的参数有什么区别吧。
// example.php?x=%5B1%2C2%5D&y=2 -- 微信
// example.php?x=1&x=2 -- 支付宝
为什么是这样的，查看了微信/支付宝/uni-app的文档，发现三者对data的解析规则是一模一样的。 那肯定是解析规则更新了，但是文档没有同步更新。猜想的话，uni-app只是简单封装，应该不会对具体 data的解析方法进行特殊处理，那可能就是支付宝小程序对data解析规则进行了调整。
看文档是如何解析data的
wx.request({
url: 'example.php', //仅为示例，并非真实的接口地址
method: 'GET',
data: {
x: '1',
y: '2'
}
})
// 按照文档所示，会把这个get请求转化为这样的`example.php?x=1&y=2`
// 那此时我们，传递的参数是一个数组的话，类似这样
const data = {
x: [1,2],
y: 2
}
// 按照文档，会把这个请求解析为：`example.php?x=%5B1%2C2%5D&y=2`
支付宝/uni-app的解释的截图就不放了，跟微信没有差别。想要更加详细的了解，请戳下面链接
为什么支付宝小程序解析出来的跟文档不一致呢
按道理照文档说的，那么应该是一致的，但是在实际开发过程的验证发现。确实没有按照文档所说的。 那么可能就是支付宝小程序的网络相关代码更新了，但是官网的文档没有同步更新。
我们当时使用的支付宝小程序开发工具版本为：version3.1.3，小程序的基础库2.7.x
刚好我们项目是先做支付宝小程序的，而支付宝小程序的解析规则，误打误撞刚刚符合我们的需求，并没有注意到这个问题，后面项目需要适配到微信小程序中，才发现了这个问题。那么我们就需要对微信小程序进行特殊处理了。将类似{data：{x: [1,2]}}的数据，解析为x=1&x=2这样的。
起初我看的这个GET请求的参数也是满新奇的，为啥参数的key是重复的呢。
这种接口难道不是应该使用POST嘛？
后来我想，应该是这样的场景，当我们需要查询某几个商品的详情信息的话，GET请求比较符合restful的设计标准。因为这个动作是获取，并没有进行更新，删除，操作等动作， 所以设计为GET,
但是为什么key值要重复呢？
为什么不这样设计了{data:{x: '1,2'}}, 利用逗号或者|分割相同key的参数。对于这个设计意图，就不是很清楚了。尽管不知道，当初的设计意图，但是我却收获了一个小知识点，不错不错！
对于微信小程序的兼容处理
// 以下是简单的示例代码
let urlParams = '?' // 解析后的参数
// data 代表请求传递的数据
keys(data).forEach((key) => {
const val = data[key]
if (Array.isArray(val) && val.length) {
val.forEach((item) => {
urlParams += `${key}=${item}&`
})
} else {
urlParams += `${key}=${val}&`
}
})
if (urlParams.length > 1) {
urlParams = urlParams.substring(0, getUrlParams.length - 1)
}
XMLHttpRequest.send
我们在这里，简单的复习下，XMLHttpRequest.send发送请求的时候，参数的类型可以为什么。
- 可以为 Document, 在这种情况下，它在发送之前被序列化。
- 可以是 Blob, BufferSource, FormData, URLSearchParams, 或者 USVString 对象
- null
具体的戳这里复习 - XMLHttpRequest.send() - Web API 接口参考 | MDN (mozilla.org)
结尾
知识点虽然小，但是确实很难注意到，还有这样的参数设计方式。本来GET请求的参数是字符串，所以传递只要符合字符串就可以，但是按照我常有的惯性思维，肯定想着key不要重复。哪知道还有这样的写法，也算见识了。
如有错误，恳请指正
开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 4 天，点击查看活动详情
