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

我们在请求http接口时候，通常都会使用get和post的方式，针对表单提交这类的请求，我们通常采用post方式。

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


我们先来说说Server端的代码，通常我们从Request获取参数时的方法为：

[java] view plain copy

1. String paraValue = request.getParameter(paraName);  

我们下面说的判断能不能获取参数，就是按照这种方法来获取。

在 RN中，通常我们会怎么写代码呢？
方案一（不推荐）：

[javascript] view plain copy

1. let url = "http://127.0.0.1:8080/api/testFetch”  
2. let params = "name=admin&password=admin123”;  
3. fetch(url , {  
4.   method: 'POST',  
5.   headers: {},  
6.   body: params,  
7. }).then((response) => {  
8.   if (response.ok) {  
9.       return response.json();  
10.   }  
11. }).then((json) => {  
12.   alert(JSON.stringify(json));  
13. }).catch((error) => {  
14.   console.error(error);  
15. });  

此时我们发现在Server端无法获取到name和password的值。
换成GET试试，将params追加到url后，发现ok。那这是什么情况呢？下面讲解。

好，不行，我们就再换一种方法试试呗。
方案二（不推荐）：

[javascript] view plain copy

 

1. let params = {"name":"admin","password":"admin123"};  
2.   
3. fetch(url , {  
4.   method: 'POST',  
5.   headers: {},  
6.   body:JSON.stringify(params),  
7. }).then((response) => {  
8.   if (response.ok) {  
9.       return response.json();  
10.   }  
11. }).then((json) => {  
12.   alert(JSON.stringify(json));  
13. }).catch((error) => {  
14.   console.error(error);  
15. });  

我们直接将params封装成一个JSON对象，然后在body里将JSON对象转成字符串传过去，发现然并卵，Server端还是获取不到值。


好，我们不兜圈子了，直接说明原因。
其实，方案一和方案二都是直接在body里传递了一个字符串，在Server端获取body的方式如下：

[java] view plain copy

 

1. StringBuilder buffer = new StringBuilder();  
2. BufferedReader reader = beat.getRequest().getReader();  
3. String line;  
4.  while ((line = reader.readLine()) != null) {  
5.     buffer.append(line);  
6.  }  
7. String body = buffer.toString();  

通过这种方法我们可以获取到传入的字符串。
既然能获取到字符串，那么我们也可以拿到我们传入的值了，可以转JSON、或者按&切割字符串，只不过这种解决方案好像有点挫啊！！！

也许你会问在jquery中，我们就是按照方案一这种方式做的啊，怎么好使呢？
答：因为参数 "name=admin&password=admin123” 在jquery中，传入对象框架会自动封装成formData的形式，fetch没有这个功能。

终极方案（推荐使用）：

既然fetch不会自动转FormData，那我们自己new一个FormData，直接传给body。
在FormData中也可以传递字节流实现上传图片的功能。参考：http://blog.csdn.net/codetomylaw/article/details/52446786

[javascript] view plain copy

 

1. let formData = new FormData();  
2. formData.append("name","admin");  
3. formData.append("password","admin123");  
4.   
5. etch(url , {  
6.  method: 'POST',  
7.  headers: {},  
8.  body: formData,  
9. ).then((response) => {  
10.  if (response.ok) {  
11.      return response.json();  
12.  }  
13. ).then((json) => {  
14.  alert(JSON.stringify(json));  
15. ).catch((error) => {  
16.  console.error(error);  
17. );  

这样我们就可以在Server端获取到name和password的值了。