使用URLSearchParams处理 fetch 发送的数据

众所周知,前端开发工作中肯定要涉及到和后端的交互,现在最常用到的就是 jq 的ajax 和 axios ,fetch 这三个。最近在用ant design pro 搞一个后台。里边用到的是fetch。
使用这些插件的时候我们经常会碰到一些问题,比如说传过去的数据格式不正确。
首先我们来看下jq 的ajax 发送的一个post 方法请求
使用URLSearchParams处理 fetch 发送的数据
然后我们在来看一下 用fetch 发出的一个post 请求
使用URLSearchParams处理 fetch 发送的数据
看到这里,有的小伙伴就要说了,修改下ContentType不就好了,其实不然,即时是修改了ContentType,数据依然不正确:
我这里把请求头中的Content-Type 改成了这样:

 'Content-Type': 'application/x-www-form-urlencoded',

使用URLSearchParams处理 fetch 发送的数据
后来经过百度发现说是如果后端是Java 或者php 的话,这种json 对象的格式数据传过去,后端不好处理,所以前端在传数据的时候需要处理一下,

使用URLSearchParams来处理参数,URLSearchParams的兼容性并不高,所以使用的时候还是要注意(可以考虑使用babel来转换)

new URLSearchParams(data).toString()

上边代码中的data 就是 我们要传到后端的json 参数对象!
使用URLSearchParams处理 fetch 发送的数据
然后ok
同样 axios 也可以这样设置来解决问题