《React-Native系列》31、 Fetch发送POST请求的坑与解决方案
来源：程序员人生 发布时间：2016-10-06 09:00:57 阅读次数：5215次
我们在要求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的值了。
生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
