使用URLSearchParams处理 fetch 发送的数据

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

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

在这里插入图片描述
后来经过百度发现说是如果后端是Java 或者php 的话,这种json 对象的格式数据传过去,后端不好处理,所以前端在传数据的时候需要处理一下,

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

new URLSearchParams(data).toString()

上边代码中的data 就是 我们要传到后端的json 参数对象!
在这里插入图片描述
然后ok
同样 axios 也可以这样设置来解决问题

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值