程序员人生 网站导航

《React-Native系列》31、 Fetch发送POST请求的坑与解决方案

栏目:综合技术时间:2016-10-06 09:00:57
我们在要求http接口时候,通常都会使用get和post的方式,针对表单提交这类的要求,我们通常采取post方式。

那末在RN中的Fetch API中post提交有哪些坑呢?让我们撸起来。


我们先来讲说Server真个代码,通常我们从Request获得参数时的方法为:
String paraValue = request.getParameter(paraName);
我们下面说的判断能不能获得参数,就是依照这类方法来获得。

在 RN中,通常我们会怎样写代码呢?
方案1(不推荐)
let url = "http://127.0.0.1:8080/api/testFetch” let params = "name=admin&password=admin123”; fetch(url , { method: 'POST', headers: {}, body: params, }).then((response) => { if (response.ok) { return response.json(); } }).then((json) => { alert(JSON.stringify(json)); }).catch((error) => { console.error(error); });

此时我们发现在Server端没法获得到name和password的值。
换成GET试试,将params追加到url后,发现ok。那这是甚么情况呢?下面讲授。

好,不行,我们就再换1种方法试试呗。
方案2(不推荐):
let params = {"name":"admin","password":"admin123"}; fetch(url , { method: 'POST', headers: {}, body:JSON.stringify(params), }).then((response) => { if (response.ok) { return response.json(); } }).then((json) => { alert(JSON.stringify(json)); }).catch((error) => { console.error(error); });
我们直接将params封装成1个JSON对象,然后在body里将JSON对象转成字符串传过去,发现然并卵,Server端还是获得不到值。


好,我们不兜圈子了,直接说明缘由。
其实,方案1和方案2都是直接在body里传递了1个字符串,在Server端获得body的方式以下:
StringBuilder buffer = new StringBuilder(); BufferedReader reader = beat.getRequest().getReader(); String line; while ((line = reader.readLine()) != null) { buffer.append(line); } String body = buffer.toString();
通过这类方法我们可以获得到传入的字符串。
既然能获得到字符串,那末我们也能够拿到我们传入的值了,可以转JSON、或按&切割字符串,只不过这类解决方案好像有点挫啊!!!

或许你会问在jquery中,我们就是依照方案1这类方式做的啊,怎样好使呢?
答:由于参数 "name=admin&password=admin123” 在jquery中,传入对象框架会自动封装成formData的情势,fetch没有这个功能。

终极方案(推荐使用):

既然fetch不会自动转FormData,那我们自己new1个FormData,直接传给body。
在FormData中也能够传递字节流实现上传图片的功能。参考:http://blog.csdn.net/codetomylaw/article/details/52446786
let formData = new FormData(); formData.append("name","admin"); formData.append("password","admin123"); fetch(url , { method: 'POST', headers: {}, body: formData, }).then((response) => { if (response.ok) { return response.json(); } }).then((json) => { alert(JSON.stringify(json)); }).catch((error) => { console.error(error); });
这样我们就能够在Server端获得到name和password的值了。
------分隔线----------------------------
------分隔线----------------------------

最新技术推荐