你一定不会注意到的get请求参数问题

直接上代码

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

结尾

知识点虽然小，但是确实很难注意到，还有这样的参数设计方式。本来GET请求的参数是字符串，所以传递只要符合字符串就可以，但是按照我常有的惯性思维，肯定想着key不要重复。哪知道还有这样的写法，也算见识了。

如有错误，恳请指正