《React-Native系列》31、 Fetch發送POST請求的坑與解決方案

我們在請求http接口時候，通常都會使用get和post的方式，針對表單提交這類的請求，我們通常采用post方式。
那麼在RN中的Fetch API中post提交有哪些坑呢？讓我們撸起來。
我們先來說說Server端的代碼，通常我們從Request獲取參數時的方法為：

String paraValue = request.getParameter(paraName);

我們下面說的判斷能不能獲取參數，就是按照這種方法來獲取。
在 RN中，通常我們會怎麼寫代碼呢？
方案一（不推薦）：

    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。那這是什麼情況呢？下面講解。

好，不行，我們就再換一種方法試試呗。
方案二（不推薦）：

    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封裝成一個JSON對象，然後在body裡將JSON對象轉成字符串傳過去，發現然並卵，Server端還是獲取不到值。


好，我們不兜圈子了，直接說明原因。
其實，方案一和方案二都是直接在body裡傳遞了一個字符串，在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中，我們就是按照方案一這種方式做的啊，怎麼好使呢？
答：因為參數 "name=admin&password=admin123” 在jquery中，傳入對象框架會自動封裝成formData的形式，fetch沒有這個功能。

終極方案（推薦使用）：

既然fetch不會自動轉FormData，那我們自己new一個FormData，直接傳給body。
在FormData中也可以傳遞字節流實現上傳圖片的功能。

     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的值了。